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.

Grid child settings
Styles panel (S) → grid child
In this lesson
  1. How can I add items in a grid?
  2. What type of items can I add in a grid?
  3. How can I position and reposition grid children?
  4. How can I reorder grid children on different breakpoints?
  5. How can I duplicate grid children?
  6. How can I make a grid child span multiple cells?
  7. How can I align grid children inside a grid?
  8. How can I override the grid children alignment for an individual 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 (column 1 row1). 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 in.

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.
Good to know
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?

You can duplicate a grid child in one of the following ways:

  • Copy and paste it using the right-click context menu or keyboard shortcut keys (CMD/CTRL+CCMD/CTRL+V)
  • Duplicate using the right-click context menu
  • Click to select the grid child then press OPTION/ALT and drag

The first two ways of duplicating a grid child will place the duplicate in the top left cell (column 1, row 1) of the grid. You can then drag the duplicate to reposition it in the grid. 

The third method (OPTION/ALT+drag) will allow you to duplicate the grid child and reposition it at the same time. If you duplicate a grid child using this method on smaller devices, the item will be placed in the top left cell (column 1, row 1) of the grid on larger devices.

What if I already have a grid child in the top left cell? 

If you've already placed a grid child in the top left cell (column 1, row 1) of the grid, duplicating any grid child will stack the children in this same cell. So, you may not be able to see all grid children in the cell. These Overlapping grid children stack based on their position in the Navigator or their z-index. Elements at the bottom stack above elements above them unless they have an overriding z-index value. To see overlapping content, move the content around (change the order in the Navigator, drag the child on top to another cell..) or change their z-index in the style panel.

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.
Good to know
Repositioning a grid child that spans multiple cells retains its span.

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 self. To reset the values so they inherit the grid children alignment values, reset them to “auto”.

More helpful resources