Quick Stack

Updated

Use the Quick Stack element to structure content on your site.

The Quick Stack element provides structure for simple to complex, responsive designs. It uses the grid display property and includes cells made of divs, which are set to flex by default. The element includes 8 presets, which allow you to place content in different arrangements. You can also manually adjust each Quick Stack preset and Quick Stack cell sizes for more control over the way your content is displayed. Quick Stack is versatile and useful for structuring all kinds of content — from hero sections to product showcases.

How to add a Quick Stack

You can add a Quick Stack via the Add panel > Structure section. Drag and drop the Quick Stack onto the Webflow canvas. An on-canvas menu of presets will appear where you can choose 1 of the 8 Quick Stack presets.

Quick Stack presets

There are 8 Quick Stack presets, which differ on their cell structure:

  • 1 column — 1 cell, spanning 1 column and 1 row 
  • 2 columns 2 cells, each spanning 1 column and 1 row
  • 3 columns 3 cells, each spanning 1 column and 1 row
  • 4 columns 4 cells, each spanning 1 column and 1 row 
  • 2 + 1 3 cells. 2 cells in the left column each spanning 1 column and 1 row. 1 cell in the right column, spanning 1 column and 2 rows
  • 1 + 2 3 cells. 1 cell in the left column, spanning 1 column and 2 rows. 2 cells in the right column each spanning 1 column and 1 row
  • 2 x 2 4 cells.  2 cells in the left column, each spanning 1 column and 1 row. 2 cells in the right column, each spanning 1 column and 1 row
  • Formatted 2 x 2 — 4 cells. 2 cells in the top row, with the left cell spanning 2 columns and 1 row, the right cell spanning 1 column and 1 row. 2 cells in the bottom row, with the left cell spanning 1 column and 1 row, the right cell spanning 2 columns and 1 row

Each Quick Stack has different use cases. For instance, you might use a 2 columns preset for a hero section — placing your written content in the right column and an image in the left. Or, you could use a 2 x 2 preset to create a responsive display of product images.

How to style a Quick Stack

You can style your Quick Stack’s grid layout, gap between cells, and display. By default, Quick Stacks come with 20px of padding between each cell and the Quick Stack parent element.

How to add or remove rows or columns in a Quick Stack

There are 4 places where you can add or remove rows or columns in a Quick Stack:

When you add a row or column to your Quick Stack, the number of cells added will match the number of rows and/or columns that already exist. For instance, if your Quick Stack has 2 rows and 1 column of cells and you add a new column, 2 cells will be added to the right of the existing cells, in their own column.

Note

When you add a row or column to your Quick Stack, the amount of cells added depends on the number of rows and columns— not the number of cells — that currently exist. For instance, if you have a Quick Stack with 2 cells in 1 row, and one cell spans 2 columns while the other cell spans 1 column, 3 cells will be added to the Quick Stack when you add another row.

Removing rows or columns also removes the content inside the row/column cells.

Add a row or column to a Quick Stack in the on-canvas menu

You can add rows or columns by right-clicking on the Quick Stack, hovering over either Add column or Add row, and choosing where to add the column or row (i.e., left, right, above, or below).

Add or remove a row or column to a Quick Stack in the Style panel

You can add or remove rows or columns by selecting the Quick Stack and going to Style panel > Layout > Grid. Then, you can add or remove columns and rows from the Quick Stack by clicking the “plus” and “minus” icons.

When you remove a row from a Quick Stack, the cell(s) in the lowest row will be removed from the Quick Stack. When you remove a column from a Quick Stack, the cell(s) in the rightmost column will be removed from the Quick Stack.

Add or remove a row or column to a Quick Stack in Edit mode

You can add or remove rows or columns in Edit mode on the canvas. Select the Quick Stack element and click Edit Quick Stack at the top right corner of the Quick Stack to open Edit mode. You can add new rows and columns by clicking the “plus” icon next to top right or bottom left cells. You can remove rows and columns by clicking the cell header, then clicking Delete column or Delete row in the on-canvas menu.

To exit Edit mode, press Esc or click Done on the canvas.

Add a row or column to a Quick Stack within the Quick Stack

You can add rows or columns directly in the Quick Stack on the canvas. To add rows or columns, select a Quick Stack cell, hover over the “blue dot” to the top, bottom, left, or right of the cell and click the “plus” icon.

How to style a Quick Stack’s gap between cells

You can increase or decrease the margin (i.e., the space outside of an element) between cells in your Quick Stack. By default, each Quick Stack comes with a 20px gap between each cell.

To adjust this gap, go to Style panel > Layout > Gap. When the “lock” icon is locked, the gap value will be the same for both column and row cells. To create independent gap sizes for column and row cells, unlock the “lock” icon and adjust the gap value(s) as needed.

You can also adjust the gap between cells by going to Edit mode, hovering over the gap between 2 cells, and clicking and dragging to increase or decrease the gap. If the “lock” icon is locked in Style panel > Layout > Gap, both the row and column gap values will adjust to the same value when you click and drag. If the “lock” icon is unlocked, you’ll only adjust the gap that you’re currently clicking and dragging (i.e., either the row or column gap value).

How to style a Quick Stack’s display

You can style a Quick Stack’s display by selecting the Quick Stack and going to Style panel > Layout >  Display. Here, you can Show or Hide the Quick Stack:

  • Show — show the Quick Stack
  • Hide — hide the Quick Stack

If you need to select a hidden Quick Stack, you can select it in the Navigator.

How to style row and column sizing

By default, each column’s size is 1 fractional unit (FR). Each row’s size is set to auto, which means the cell will size based on the content inside.

You can adjust the FR sizing, or the min/max sizing by going to Edit mode, clicking the row’s header or column’s header and changing the sizing in the on-canvas menu. You can also adjust sizing by clicking and dragging the edge of each row or column header in Edit mode. Outside of Edit mode, you can adjust sizing by selecting a cell and clicking and dragging the resize handle on the cell border.

How to style a Quick Stack on different breakpoints

When you select the Quick Stack element and switch breakpoints — from the default desktop breakpoint — you’ll notice that the rows option in Style panel > Layout > Grid is grayed out, and has a new “Auto” value. Webflow will autofill the row value — based on the column value already set — to fit the number of cells in your Quick Stack.

Sometimes the Quick Stack’s display and grid styles have pink indicators in Style panel > Layout — this means that these styles apply only to the selected element on the current breakpoint.

How to style a Quick Stack cell

On breakpoints other than the desktop breakpoint, you can style a Quick Stack’s cell by selecting a cell on the canvas and going to Style panel > Cell size. You can adjust the cell to span 1 or multiple rows and columns in size. You can also change the order of cells. In order, you can make a cell first, last, or set a custom order by clicking the “three disclosure dots” and typing a value in the order field. Note that you’ll have to set order values greater than 0 on all other cells in your Quick Stack if you want to set a custom order value on a cell.

On the desktop breakpoint, you can adjust cell sizes by merging and unmerging cells.

Sometimes the cell’s size and order styles have pink indicators in Style panel > Cell size — this means that these styles apply only to the selected cell on the current breakpoint.

Note

By default, Quick Stack cells use flexbox.

How to style Quick Stack cell spacing

You can add padding but not margin to a Quick Stack cell. If you want to add spacing between cells and the parent Quick Stack element, you can style the Quick Stack’s gap between cells.

How to merge Quick Stack cells

You can merge a Quick Stack cell with cells to its left, right, top, or bottom. Note that when you merge cells, the content of the cell you’re merging into will be removed.

There are 2 ways to merge Quick Stack cells:

  • From the on-canvas menu right-click on the cell you’d like to merge, hover over Merge cell in the on-canvas menu, and choose the direction in which to merge the cell (i.e., above, below, right, left)
  • Using on-canvas controls   select the cell you’d like to merge, hover over the blue dot to the right, left, above, or below the cell (depending on which direction you want to merge the cell), then click the Merge cell icon
Note

You can only merge a cell that is of equal or larger size than the cell(s) with which you’re merging it.

How to unmerge Quick Stack cells

There are 2 ways to unmerge Quick Stack cells:

  • From the on-canvas menu right-click on the cell you want to unmerge and click Unmerge cells in the on-canvas menu
  • From the Style panel — select the cell you want to unmerge, go to Style panel > Cell size, and click Unmerge cells
Note

When you unmerge cells, the contents of the original cell you merged into will not be restored.