Grid — also known as CSS grid — is a display property for structuring layouts. It provides flexibility for repositioning and resizing grid content to produce powerful, responsive designs. Note that since grid is a display setting, it is a guide.
In this lesson, you’ll learn:
- How to create and edit a grid
- How to place content in a grid
- How to move, span, and align grid content
- How to design a responsive grid
How to create and edit a grid
To create a grid, add an element that supports grid (e.g., a section, div block, etc.) to the canvas from the Add panel. Then, select that element, go to Style panel > Layout > Display, and choose Grid.
How to edit a grid
To edit a grid, select the element that contains the grid. Then, go to Style panel > Layout > Display and click Edit grid. To exit the grid edit mode, press Escape or click Done on the canvas.
How to add rows and columns
You can add new rows and columns in grid edit mode by clicking the “plus” icon next to top right or bottom left grid headers. You can also add new rows and columns by going to the Style panel and clicking the “plus” icon next to Columns or Rows.
How to duplicate and delete rows and columns
To duplicate or delete a column or row, right-click the row or column header on the canvas and select Duplicate or Delete. You can also delete or duplicate a row or column in the Style panel when you hover over the column or row.
How to reorder rows and columns
You can reorder rows or columns in the Style panel. Hover over the row or column you’d like to move, then drag the handle that appears on the left side.
How to adjust gaps between columns and rows
Gaps let you specify the space between rows and columns without having to add margin or padding. To adjust the gap size between rows and columns, click and drag the gaps on the canvas. You can also set the gap size in the Style panel under Gap.
Adjust columns and row sizing
You can adjust the size of grid columns by selecting and dragging the column heading to the desired size on the canvas. You can also enter a custom size for columns or rows in the Style panel, or by clicking a row or column heading on the canvas.
You can use regular units (e.g., px, em, rem) when determining grid sizing, or you can use FR units. The FR unit represents a fraction of the available space in the grid. You use it to define the length of rows and columns just like a percentage or pixel unit, but, unlike fixed percentages or pixel units, the FR unit automatically calculates row and column space while adjusting for gaps.
You can also set min/max values to ensure your rows and columns don’t shrink beyond a set minimum value or expand beyond a set maximum value. For example, if you want your rows to have a minimum height of 200px, you can set the min value to 200px and the max value to Auto. Then, the row will grow based on the content inside and never shrink beyond 200px.
How to place content in a grid
You can add any child elements (e.g., headings, images, div blocks, etc.) inside a grid. By default, every new grid child will populate an individual grid cell and fill in the next available cell from left to right. If there are no more available cells in a row, a new row will be generated to house the new grid children.
How to change the direction in which grid content flows
You can change the direction of grid children in grid edit mode by going to Style panel > Direction. Here, you can select Row, which places children from left to right or Column, which places children from top to bottom.
How to manually position content in a grid
To manually position content in a grid, hold Shift while you drag the element into the grid. Any item manually positioned in the grid will keep its manual position setting. You can also change the position setting of an existing grid child to manual. To do so, select the grid child, go to Style panel > Grid child > Position, and set it to Manual.
Manually-placed grid children remain in their designated grid cell whereas automatically-placed grid children move into the next cell to accommodate new grid children.
How to nest multiple elements in a grid cell
You can add multiple elements to a single grid cell by nesting elements within the grid child. To do this, you’ll first want to add a structure element (e.g., a div block) to the grid as the direct grid child. Once you’ve added the structure element as the grid child, you can add other elements to the div block by holding Control while you drag the elements into the grid cell.
How to duplicate content in a grid
There are 2 ways you can duplicate a grid child to reuse the same content in more than one grid cell:
- Hold Option (on Mac) or Alt (on Windows) and drag the content to duplicate it and move it into a new grid cell
- Select and copy the content, then select the grid and paste the content
How to move, span, and align content in a grid
Once you’ve placed your content in a grid, you can customize the content’s design. You can move the content around to reposition it in different cells, you can span the content to take up multiple cells, and you can even adjust alignment of the content within the grid.
Move grid children
To reposition content in the grid, select and drag the grid child to the desired location on the canvas or in the Navigator.
Set grid child order
You can also set the order of grid children by selecting the grid child and going to Style panel > Grid child > Order.
Align content in a grid
To update the alignment for all grid children, select the grid and go to Style panel > Layout > Align.
To change the alignment of a single grid child, select the grid child and go to Style panel > Grid child > Align.
Span grid children
To span a grid child across multiple grid cells, select the grid child and drag the handle that appears in the corner of the grid cell.
You can also span grid children in the Style panel. To span an automatically positioned grid child, select the grid child, go to Style panel > Grid child > Position, and specify how many columns and rows the grid child should span.
To span a manually positioned grid child, select the grid child, go to Style panel > Grid child > Position, and enter which column and row the grid child starts and ends in.
Lock grid child positioning
Negative numbers let you position grid children relative to the end of the grid — they reference cells from right to left or bottom to top.
Negative grid child positioning values are great if you:
- Don’t want to re-span your navbar to fill all columns each time you add new columns — position the navbar between column 1 (the first column) and column -1 (the last one).
- Want to keep your footer in the last row of the grid no matter how many rows you add to your grid — position your footer in row -1/-1
- Want to keep the main content section always centered in your grid with the same number of columns on each side — set the “end” value to be the negative equivalent of the “start” value (e.g., 3/-3). If you remove columns on smaller breakpoints, the child will remain centered
Clear grid child settings
Grid child settings apply only to the selected element and aren’t saved with the class. Pink labels in the Style panel show changed settings applied to the selected element on the current breakpoint. These settings cascade to lower breakpoints and are indicated with orange labels. The indicator will turn pink again when you override an inherited (i.e., orange) setting on a smaller breakpoint.
To remove any applied grid child setting, click the pink label on the setting, then click Reset.
Overlap grid children
Grid children with manual positioning will automatically overlap when they intersect in the same cell(s). You can control the stack order of those overlapping elements by repositioning them in the Navigator or by adjusting positioning and z-index settings. Learn more about overlapping grid content.
Fill empty grid cells
Empty cells might remain in the grid when you have spanned grid children. To automatically populate these cells with content, go to grid edit mode, then check Dense in the Style panel.
Important: The dense setting attempts to fit grid children into empty cells of your grid. This can be bad for accessibility, as it only alters where items display, not where they appear in the page’s source.
How to design a responsive grid
To design your grid so it’s responsive across screens, you can either manually delete columns on smaller breakpoints or enable auto-fit to automatically generate columns and rows to accommodate smaller screen sizes.
Manually style the grid layout across breakpoints
To make sure your grid is responsive on all devices, remove columns on smaller breakpoints as needed.
If you can’t remove columns on smaller breakpoints:
- Try setting your grid Direction to Row
- Make sure you haven’t manually-positioned grid children in those columns
- Make sure you don’t have child elements spanning those columns
Auto-fit is one of the most powerful features of grid. It allows you to automatically repeat and wrap columns so the grid works across every screen size — no per-breakpoint adjustments needed.
To enable auto-fit, delete all but 1 column and 1 row in your grid. Then, go to grid edit mode, click the column’s header, set minimum and maximum dimensions for the column, and check Auto-fit. More columns will automatically generate and repeat to responsively distribute content in your grid.