Grid areas let you create reusable layouts that you can restructure with ease. Add grid children to the grid areas, move the areas around, and watch as all of the content moves with the area — updating every instance of the grid automatically.
With grid areas, you can:
- Create reusable grid layouts
- Adjust grid layouts on different devices by reshuffling the areas
- Update multiple instances of a grid layout at the same time
In this article, you’ll learn:
- How to create a layout with grid areas
- How to add, position, and align content in grid areas
- How to reposition and resize grid areas
- How to design grid areas for different screen sizes
- How to reuse layouts with grid areas
How to create a layout with grid areas
Once you’ve created a grid, you can define areas on your grid to create a reusable layout.
Define grid template areas
You can add grid areas directly on the canvas. Go to grid edit mode, hover over a grid cell, and click the “plus” icon in the top left corner. Once you’ve added a grid area, you can drag the corner to span and reposition the area. You can also click the area label and specify the position in the settings modal, or go to the Style panel, click the area label, and specify the position.
To name grid areas, go to grid edit mode, click the area label, and type a Name. Grid area names are helpful to specify the function of the area (e.g., “footer”) or the type of content it will contain (e.g., “main image”).
How to add, position, and align content in grid areas
Once you’ve defined your grid areas, you can add elements to each grid area. These elements become a grid child of that area and will automatically move with the area.
To reposition elements within the grid, select the element, go to Style panel > Grid child > Position, set it to Area, and select the area in which you want to position the element from the Grid area dropdown.
Align content inside an area
Grid children positioned within areas will inherit alignment settings from the parent grid. To change the alignment of a single grid child within an area, select the grid child, go to Style panel > Grid child > Align, and choose the alignment setting you want.
How to reposition and resize grid areas
Any element within a grid area will move and resize with the area.
To reposition an area, go to grid edit mode and drag the area to a new position. To resize the area, drag its corner. Since areas can’t overlap, you may need to resize them before re-spanning an area.
How to design grid areas for different screen sizes
Redefining areas is particularly useful when designing for different screen sizes. You can reposition and resize areas on individual breakpoints to change layouts on different devices.
How to reuse layouts with grid areas
The parent grid class applies to each grid area you define. To reuse a grid area layout, apply the parent grid class to another element (e.g., a div block). From there, you can drag content into the new grid area(s) and create the same layout with new content.
This is useful, for instance, to create reusable page layouts. You can define a header area, a main content area, and a footer area. Or, you can create a card layout with an image area and a text area.
Adjust grid areas across multiple instances
These grid area layouts act similarly to components. You can quickly update all instances of a grid area layout across your site by updating a single instance of it. Be mindful when adjusting grid area layouts since it can affect content positioning. You can always use combo classes if you need to adjust a grid area on a single instance.
Check the grid for accessibility
Just like manually-positioned grid children, grid areas children are explicitly defined in the grid. So, when these children move as you move grid areas, their position in the document order doesn’t change. Be mindful of this fact when moving areas in your grid to help ensure site accessibility. Make sure you’re moving the areas for organizational purposes, and that the reading order isn’t affected by it.
Move the explicit grid children in the Navigator to be the order you want users to read your content. This action won’t affect the positioning of these grid children on the page.
What happens if I rename or delete an area?
When you delete an area, grid children positioned in that area will move to auto-generated rows and columns. To restore these children, re-add an area with the same name.
What happens if I add multiple elements into a grid area?
The elements will overlap. You can reorder these elements in the Navigator or use z-index to change the overlap order.
Can I add grid children in cells that are part of a grid area?
Yes, auto-positioned or manually-positioned grid children can occupy cells that are also part of an area.
For example, you can create a spanned grid area with a background color. Then, you can add manually-positioned header content in the grid cells.
- Create a “Header” grid area that spans 4 columns of the first row
- Position a div block in the “Header” grid area and set a background color
- Manually position a logo in column 1 row 1
- Manually-position and span a navbar from column 2 to 4 in row 1
Can I define grid areas for Collection lists?
You can’t define grid areas for Collection lists, but you can define grid areas for Collection items within Collection lists.