How do I add a Quick Stack in Webflow?

Drag a Quick Stack and pick a preset

A Quick Stack is its own element for laying out a section. It uses grid, and the cells inside it use flex by default. It is not the same job as selecting a Box and setting Display to Grid. That manual grid is the grid guide. Use this element when you want a preset arrangement and cells that are ready to hold content.

Open the Add panel, go to Structure, and drag a Quick Stack onto the canvas. An on-canvas menu lists eight presets. Pick the one closest to the section. You can change the rows and columns after.

The eight presets differ by how the cells span:

• 1 column, 2 columns, 3 columns, and 4 columns: that many equal cells, each one column and one row.
• 2 + 1: two stacked cells on the left, and one cell on the right spanning two rows. 1 + 2 is the mirror of that.
• 2 x 2: four equal cells, two by two.
• Formatted 2 x 2: the top-left cell spans two columns, and the bottom-right cell spans two columns.

Example: a hero can use 2 columns, with the image in the left cell and the heading plus paragraph in the right cell. Four product photos can use 2 x 2.

By default each column is 1FR, so the columns share the free space, and each row is auto, so the row height follows what is inside.

Change the gap, the rows, and the columns

The gap between cells starts at 20px. Select the Quick Stack and open Style panel, Layout, Gap. When the lock is on, the row gap and the column gap stay the same number. Unlock it when the horizontal space and the vertical space should differ. You can also drag that gap while Edit Quick Stack is open. If the lock is on, both directions change together. Press Esc or click Done to leave that mode.

To add a column or a row, right-click the Quick Stack, hover Add column or Add row, and choose the side: left, right, above, or below. Style panel, Layout, Grid has plus and minus icons for the same job. Adding a column adds as many cells as the stack already has rows. A stack with two rows and one column gains two cells when you add a column.

Removing a column removes the rightmost column and the content in those cells. Removing a row removes the lowest row and its content. Do not remove a row to tidy the layout if those photos are the ones you need.

Example: the hero was 2 columns, and you want a note under both. Add a row below, then place the note in the new cell. The cells above keep the heading and the image, because you added a row rather than removing one.

Merge a cell only when you mean to

On the desktop breakpoint, you change how much of the grid a cell covers by merging and unmerging. You can merge a cell with the cells above, below, left, or right. Right-click the cell, hover Merge cell, and choose the direction. Or select the cell, hover the blue dot on that side, and use the merge icon.

Merge only a cell that is the same size or larger than the cells you are merging it with. The content of the cell you merge into is removed. Unmerging does not bring that content back. If the right cell holds the only copy of a paragraph, move that paragraph first. Unmerge cells, from the on-canvas menu or from Style panel, Cell size, splits the cell again and does not restore the deleted paragraph.

A cell can take padding. It cannot take margin. If the words feel tight inside one cell, add padding on that cell. If two cells should sit farther apart, change the Quick Stack gap. The spacing guide is padding and margin on ordinary elements.

Adjust a smaller breakpoint

Select the Quick Stack and switch to a breakpoint smaller than the desktop canvas. The rows option under Style panel, Layout, Grid is grayed out there, and it shows Auto. Webflow fills the row value from the column value so the cells still fit. You do not type a row count on that breakpoint the way you do on desktop.

On a breakpoint other than desktop, select a cell and open Style panel, Cell size, to span rows or columns and to set order: first, last, or a custom number. A custom order also needs an order value greater than 0 on the other cells. Pink marks mean that layout value applies on the current breakpoint only.

Example: the hero is 2 columns on desktop, image on the left and text on the right. On the phone breakpoint, set the text cell to first if the heading should sit above the image, and give the image cell an order greater than 0. Do not drag the elements in the Navigator for this, because that move changes every width. On desktop, keep using merge and unmerge for cell size.

Publish and read both widths

Publish and open the page on a wide window and on a phone. The wide layout should still match the preset. The phone should show the order you set on that breakpoint. If a merge deleted a sentence, type it into the cell that remains. If a removed row took a photo, place the image again from the Asset panel.

A Quick Stack on a page you already have is ordinary layout work. The membership is one plan for every existing Webflow site: $999 per month, including 10 hours of Webflow work. Additional work is $75 per hour and starts only after you approve a written estimate.