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!

A grid child is any element placed inside a grid and each grid child can live in a single grid cell or span multiple cells.

In the Style panel, you can align grid children horizontally or vertically and change their position across different breakpoints. Grid child styles aren’t saved to the class, so you can style each grid child any way you’d like without creating a combo class.

In this article, we’ll cover:

  1. Adding items to a grid
  2. Positioning and reposition grid children
  3. Reordering grid children across breakpoints
  4. Duplicating grid children
  5. Spanning a grid child across multiple cells
  6. Aligning children inside the grid
  7. Overriding grid child alignment

Adding items to a grid

You can add any element inside of a grid — including another grid. You can add elements to the grid by dragging them directly into the grid or by clicking an element in the Add panel when the grid is selected.

In most cases, when you add an element to a grid by selecting it from the Add panel, it will appear in the top left cell of the grid. To control where an element goes in the grid, drag it into a specific cell.

To add more than one element to a grid cell, first add a div block, link block, section, or container into the grid cell and add other elements into that element.

Adding symbols to a grid

Grid positioning values will save to the symbol, so instances of a symbol will have the same values. If you plan to add a symbol into your grid, nest it in a div block first.

Positioning and repositioning grid children

To reposition grid children within the grid, simply click and drag the element to a new grid cell. When you select an element within a grid, the element’s border will be illuminated and any empty grid cell will be highlighted on hover. This highlight indicates that when you drag the element into the grid cell, it will become a grid child. If you drag an element into a grid cell that is not highlighted, it will be nested within an existing grid child.

This highlight indicates that when you drag the element into the grid cell, it will become a grid child. If you drag an element into a grid cell that is not highlighted, it will be nested within an existing grid child.

Reordering grid children across breakpoints

You can rearrange grid children into different cells and across various breakpoints based on the responsive layout you’ve created. To affect a single breakpoint, reposition grid children and not the elements nested inside of a grid child. Repositioning any element that isn’t a grid child anywhere on the canvas will reposition that item on all breakpoints.

Learn more about styling across breakpoints.

How can I duplicate grid children?

To duplicate a grid child, you can:

  1. Copy, and paste the grid child using the keyboard shortcut Command/Control + C and Command/Control + V when you have the grid child selected.
  2. Right-click the grid child and select duplicate
  3. Select the grid child, press OPTION/ALT, and drag to the desired position

Using the keyboard shortcut or the right-click menu will place the duplicate in the top cell (column 1, row 1) of the grid. You can then drag the duplicate to reposition it in the grid.

Clicking to select the grid child, pressing Option/Alt, and dragging 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. When this happens, some grid children may be hidden.

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, reposition the grid children in the Navigator or change their z-index in the style panel.

Spanning grid children across multiple cells

By default, a grid child will be placed inside a single cell. To span grid children across multiple cells, select the grid child on the canvas and drag the bottom right handle. You can span a grid child across the adjacent columns, rows, or both.

You can also span grid children across multiple cells in the Style panel. To do so, select the grid child and enter which column and row the item starts and ends in.

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:

To control the stack order of overlapping elements, reposition them in the Navigator.

Aligning grid children

You can align grid children horizontally and vertically within the grid cells. You can also control whether grid children are aligned at the start, center, or end of a grid cell or grid area. You can also stretch the content to fill the whole width, height, or area of the grid cell.

To set the alignment of grid children, select the grid container and choose your desired alignment in the Style panel. You can set the child alignment in the Style panel. Here, you can adjust the alignment of grid children when you select the grid container.

Overriding grid child alignment

To override the alignment settings for a grid child, select the grid child and specify the alignment settings in the Style panel. To reset the values so they inherit the grid children alignment values, reset them to auto.

For more information on the grid layout, check out: