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.

(1) Styles (S) → (2) layout → (3) display settings → (4) 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 lists – columns – lists.

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.

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:

Define gaps between columns or rows, or turn the lock icon “on” to constrain the gaps to the same value.

Distribute

You can distribute tracks (columns and rows) horizontally and vertically inside the grid container.

Distributing the columns 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).

Distributing the rows 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).

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.