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!
Check out the Building CSS grid layouts in Webflow video course

The grid element lets you create layouts with rows and columns based on CSS grid. You can customize your grid right on the canvas or via the styles panel. You can populate your grid with elements, which become grid children. Grid children can fill a single grid cell or span adjacent cells.

With grid, you can often create layouts without using additional styles (like floats and other positioning options). It also allows you to rearrange content across devices without changing their order of appearance on other screen sizes.

Good to know
Grid tracks refer to columns and rows within a grid.

How can I add a grid element?

You can add a grid element from the add panel or via Quick find (CMD/CTRL+E).

Add elements (A) → elements → layout → grid
Good to know
Pro tip
A grid element takes the full width of its parent element. So when added inside of the body element or any section that spans 100% of the viewport width, the grid template mask might cover part of the grid cells. For better on-canvas control of your grid, either add some margin around the grid element or add some padding inside the parent.

How can I edit the grid?

When you add a grid element onto the canvas, you enter grid template mode. This enables the grid controls on the canvas and opens the grid template settings in the Styles panel. Both these tools allow you customize the structure of your grid. You’ll also see a persistent snackbar that allows you to change the color of the template mask and exit template mode. Here we’ll cover how you can use the on-canvas controls.

(1) the grid controls on the canvas — (2) the grid template settings in the Styles panel – (3) the persistent snackbar

Editing the grid on the canvas

The on-canvas grid controls allow you to:

  1. Add tracks (columns and rows) by clicking the [+] buttons
  2. Delete a track through the right-click menu
  3. Change the track sizing by clicking the heading or by using the drag-handles
  1. Change the gap values by clicking and dragging the gaps. Hold SHIFT while click-dragging to match the values for the column and row gaps.
‍Hold SHIFT while click-dragging to match the values for the column and row gaps
What’s the FR unit?
Learn all about the fractional unit (fr) and track resizing
What’s next?

Now that you’ve added a grid element and customized it:

More helpful resources