Grid layout (style)

Check out the Building CSS grid layouts in Webflow video course

There are two ways to use grid in Webflow:

  • add a grid element
  • apply a grid layout to an element

In this lesson, we talk about the grid layout style which allows you to convert elements like div blocks and forms into grid containers.

To learn about the grid element, check out the grid element guide.

How can I apply grid layout to an element?

Select the element you want to convert to a grid and set its display setting to grid under Styles (S) → layout.

Styles (S) → layout → display settings → grid
Need to know

Some elements are not yet supported in the current version of grid. Support for the following elements is coming soon:

  • Collection List and Items
  • Columns
  • Lists
  • Search Results

Applying grid to an element without any children

When you apply grid to an empty element, you’ll get a default grid layout of four grid cells: two columns and two rows. You can edit this layout afterwards.

Applying grid to an element with children

If you apply grid to an element that contains other elements, the following things happen:

  • You'll get a grid of two columns and as few as two rows or as many rows as needed to accommodate all direct children
  • Each direct child of the now grid container gets positioned in its own grid cell

You can change the grid layout and the positioning of elements later.

 

Pro tip

You can apply grid layout to the body (all pages) tag to create a master layout for all pages in your project. You can always edit the layout on specific pages by applying a class to the body. Learn more about creating a master project layout (video lesson).

How can I customize my grid layout?

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 layout of your grid. You’ll also see a persistent snackbar that allows you to change the color of the template mask and exit leave template mode. Here we’ll cover how you can use grid template settings in the Styles panel. To edit the grid on the canvas, check out the grid template guide.

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

Editing the grid template in the Styles panel

As soon as you apply grid layout to an element, the grid template settings show up in the Styles panel. You can also assess these settings via the edit grid button.

Styles panel → layout → display settings → edit grid

Here, you can do any of the following:

  1. Define gaps between columns or rows, or turn the lock icon “on” to constrain the gaps to the same value.
  2. Add columns or rows
  3. Specify track sizingdefault (a specific length like 1fr, 2fr, auto, 25%, 300px) or min-max (a minimum and a maximum length). Learn more about track sizing and the FR unit.
  4. Reorder columns or rows of varying sizes to create a different layout
  5. Delete columns and rows
Grid settings: (1) define gaps — (2) add tracks — (3) change the size of tracks — (4) reorder tracks — (5) delete tracks
Need to know

Both reordering and deleting tracks doesn’t affect position of grid children. Learn more about grid child positioning.

Alignment

Just like flexbox, you can align and justify your grid children in grid cells. You can also align grid tracks inside the grid container.

Aligning children

You can align the children of a grid layout horizontally and vertically within the grid cells. Choose to align them at the start, center, or end of a grid cell or cells (for grid children spanning multiple cells). You can also choose to stretch the content to fill the whole width, height, or area of the grid cell. Stretch is the default value for both fields.

You can override alignment settings for each grid child individually. Learn all about the grid child.

Aligning tracks

The tracks alignment setting allows you to align the grid columns and rows inside the grid container.

Aligning the column tracks (the justify-content in CSS) allows you to align the grid layout horizontally. The grid template has to be less than the grid container's width for this option to have any effect (example: the grid container is 80vw wide and has 3 columns of 20vw each with no gaps).

Aligning the row tracks (the align-content property in CSS) allows you align the grid layout inside the grid container vertically. The total height of the grid rows needs to be less than the grid container's height for you to be able to align the rows. (example: the grid container is 90vh tall and has 3 rows of 20vh each with no gaps).

Stretch is the default value for both fields.

Good to know

You can also customize the grid using the on-canvas controls. Learn more about customizing the grid template.

Grid layout on other breakpoints

You can customize the grid layout on the different breakpoints to make it responsive. You can add, remove, resize tracks and gaps. You can change the alignment of children and tracks as well. Learn more about the grid template.

What happens if I apply a class with grid layout?

Reusing a class with a grid display setting is very much like applying grid to an element. It works just like any another class, all grid settings get applied to the selected element. So, empty elements inherit the same structure as the class. If the class has 8 columns and 4 rows, any element with that class will have the same structure of 8 columns and 4 rows with the same sizing.

Elements with children also inherit the same structure, and each direct child moves into its own grid cell in the grid. 

What happens when the element has more direct children than the number of cells in the grid applied?

The grid adds as many non-existing rows as needed to accommodate all elements. You'll see these non-existing rows in grid template mode on the canvas but not in the styles panel. They appear as non-clickable, shadeless headings with a default, unchangeable height of “auto”.

Need to know
Grid children in non-existing tracks, or auto-tracks, do remain in the grid and get published on your site. Keeping these tracks will not affect the structure of other grids with the same class. Remember that these tracks have an auto height. 
That said, you could choose to change the row sizing or change the grid structure to fit all grid children in the actual grid. To do that, add new rows to replace non-existing rows. Note that in this case, the grid layout will change for all elements with that class. Use a combo class to only affect the selected element.
You can of course also choose to restructure your content. For example, you can nest grid children in div blocks and position those in existing grid cells. Or, you can remove some of the grid children from the grid either by deleting them or moving them out of the grid. Then, reposition the remaining items from the non-existing rows in existing grid cells.

Once you remove all grid children in non-existing tracks, these auto-tracks will disappear.

What’s next?

Now that you’ve applied the grid layout and customized it, you can:

Start adding items in your grid: position grid children in grid cells, rearrange the content on different breakpoints. Learn about the grid child.

More helpful resources