Any element you place directly inside a grid element or an element with display setting:grid becomes a grid child. Each grid child lives in a grid cell or can span multiple cells. You can set how each item aligns horizontally and vertically within each cell. You can also change the position of grid children on different breakpoints to create different layouts based.

Styles panel (S) → grid child
Must know
Grid child styles aren’t saved to the class so you can alter the placement of other elements that share the same class. No need to create combo classes.

How can I add items in a grid?

You can add any element into a grid from the add panel (A) or using quick find (CMD/CTRL+E). You can also drag in elements from other parts of a page or paste in elements from other pages or projects.

In most cases, an element added to a grid container will appear in the top left cell of the grid. This is also the case when you drag elements into a grid in the Navigator regardless of the order of the elements in the grid. However, if you drag elements into the grid on the canvas, you’ll be able to choose which cell to drop the item.

Need to know
Make sure to select the grid container when placing items via click-to-add. If a grid child is selected instead, the element will be added inside of the grid child making it a child of that item and not a grid child. The same is true for when you drop items inside the grid. Make sure to drop them inside the highlighted cells to convert them to grid children.

What type of items can I add in a grid?

You can nest any element inside of a grid including another grid. To add more than one element in the same grid cell, nest those elements in other elements (like div blocks or link blocks). You can then apply flexbox or even grid on those grid children.

What about Symbols?

Because the grid positioning values are saved into the symbol, all instances of a symbol will have the same values. As such, if you plan to add a symbol into your grid, nest it in a div block first.

How can I position and reposition grid children?

The on-canvas template allows you to drag any element to position it inside of the grid. At any moment, you can select a grid child and reposition it within the grid.

A selected grid child will have a bordered highlight in the color of your template mask. Cells you can drop items inside will have a shaded highlight when you drag an item onto them (on-hover).

Need to know
Make sure to drop an element inside of a shaded cell if you want it to be a grid child and not nested inside of another grid child.
You can also set the position of a grid child using the grid child settings in Styles panel →  grid child →  position. These settings will only affect the selected element and won’t be saved to the class. So, you can use the same class for multiple grid children without the need to add combo classes to reposition them within a grid.
The position values here refer to the track number.

How can I reorder grid children on different breakpoints?

Based on the responsive grid layout you’ve created, grid children can be rearranged in different cells on the various breakpoints either on the canvas or in the grid child → position settings.

Good to know
For various reasons, the on-canvas controls might be hard to use on smaller breakpoints, in those cases, use the settings in the Styles panel to adjust the positioning of grid children.
Important!

To affect only a single breakpoint, you can only reposition grid children on the canvas template and not elements contained inside the grid children. Repositioning any element that isn’t a grid child anywhere on the canvas will reposition that item on all breakpoints. Learn all about styling across breakpoints.

How can I duplicate grid children?

Copy/pasting a grid child will place it in the top left cell of the grid. Duplicating a grid child using the context menu will place the item in the same cell. You can then drag the duplicate to reposition it in the grid or remove it from the grid. However, we recommend that you OPTION/ALT+drag any grid child to duplicate and reposition it at the same time.

Need to know
Multiple grid children in the same cell will overlap and you might not be able to see them all.
For overlapping children, the order of the grid child is determined by its position in the Navigator (elements at the bottom stack above elements above them) or its z-index.

How can I make a grid child span multiple cells?

By default, a grid child will be placed inside a single cell. Dragging an item to reposition it on the canvas will also place the item in a single cell. However, a grid child can also span adjacent cells. This can be done in one of the following ways:

  1. On the canvas, select the grid child and drag the bottom right handle to make the grid child span across the adjacent columns, rows, or both.
  1. In styles panel →  grid child → position, type in which column the item starts in and which column it ends in. Do the same for the row.
To extend this heading from column 1 to column 2 and from row 1 to 2, set the column start value to 1, the column end value to 2, the row start value to 1, and the row end value to 2.

Overlapping grid children

When you place grid elements in the same cell or intersect spanning children in the same cell or cells, the grid children overlap. You can overlap grid children to create different layouts such as the one below:

You can control the stack order by repositioning the elements in the Navigator.

How can I align grid children inside a grid?

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 grid area. You can also choose to stretch the content to fill the whole width, height, or area of the grid cell.

You can set the children alignment in styles panel → layout → alignment → children when you select the grid container.

How can I override the grid children alignment for an individual grid child?

You can override alignment settings for each grid child individually in Styles panel →  grid child →  align. To reset the values so they inherit the grid children alignment values, reset them to “auto”.

More helpful resources