Grid layouts in Webflow

The UI in this lesson may seem different if you've enables the Style Panel Beta! This content will be updated soon!
This video features an old UI. Updated version coming soon!
In this lesson
  1. Adding a grid
  2. Dropping things in a grid
  3. Moving things in a grid
  4. Spanning multiple cells
  5. Editing a grid

❶ Adding a grid

You can add a grid in one of the following ways:

❷ Dropping things in a grid

You can add elements into a grid by clicking, dragging, and then dropping the elements in a grid cell.

❸ Moving things in a grid

To move elements or reposition them, just click to select the grid child and then drag and drop it into a different cell.  Learn more about the grid child.

Centering content in a cell

To center the content of all cells, select the grid container or parent and simply center the children horizontally and vertically in Style panel → layout → display setting → alignment → children. Everything will center inside each of the grid cells.

To affect alignment on a single grid child, select the grid child itself and center it horizontally and vertically in Style panel → grid child → align.

Grouping content in a single grid cell

You can drag in a div block and use that div block to position content in a grid cell. You can center the content in this div block using flexbox.

❹ Spanning multiple cells

You can also span elements multiple cells. Click the grid child to select it, then click and drag the handle at the right bottom corner of the grid child to span it adjacent columns or rows or columns and rows. Learn more about the grid child.

Making the content responsive

You can change the position of grid children and how they span on different devices. Just reposition them or edit how they span on each breakpoint.

❺ Editing a grid

To edit the grid, press edit grid in Style panel → layout → display setting. Or, if you have a grid selected on the canvas, press enter on your keyboard or if you prefer to use your mouse, click the edit grid button on the canvas.

From there, you can add rows, you can add columns. You can adjust the gaps in between rows and columns. You can delete a row or delete a column. You can also adjust the width of each column or the height of each row. You can set track sizing right on the canvas or in the Style panel. Learn all about the grid container.