Grid areas allow you to create layout templates that you can reuse and restructure with ease. Assign grid children to these template areas, move the areas around, and watch as all of the content moves with the area — updating every instance of the layout automatically.
With grid template areas, you can:
- Create reusable page layouts
- Create radically different layouts on devices by reshuffling the areas
- Update multiple instances of a layout across your site by restructuring the grid
In this article
- Create a layout with grid template areas
- Add and position content in grid areas
- Reposition and resize grid areas
- Design grid areas for different screen sizes
- Reuse layouts with grid template areas
Create a layout with grid template areas
Once you’ve created a grid, you can define areas on your grid to create a layout template that you can reuse across your site.
Define grid template areas
You can add grid areas directly on the canvas. Edit the grid, then hover over any grid cell and click the plus icon that appears to create an area.
Once you’ve added a grid area, you can drag the corner to span and reposition the area to change its size and position. You can also click the area label and specify the position in the settings window that appears.
You can also add and specify the position of a grid template area in the Style panel.
To add an area in the Style panel, edit the grid and click the plus icon next to areas in the grid settings. To change the position of a grid area, click the area and specify in which columns and rows it starts and ends in the grid settings.
Name areas
You can name grid template areas so that you can easily identify them in a grid and reuse them elsewhere in your project. It’s especially helpful to use names that specify the function of the area (eg. footer) or the type of content it should contain (eg. main image).
You can name an area on the canvas by clicking the area label while you’re editing the grid or in the grid settings in the Style panel.
Add and position content in grid areas
Once you’ve defined your grid areas, you can add and assign content to each grid area that will automatically move with the area.
Add content to a grid area
Drag and drop your content directly onto a grid template area. Once you’ve added an element, it becomes a grid child of that area.
Reposition a grid child inside an area
You can change the position of any content within the grid in the Style panel. To do so, select the element you’d like to move, set its position to “area” in the grid child settings, and specify the area in which you want to position the element.
Align content inside an area
Grid children positioned within areas will inherit any alignment settings for the parent grid. To change the alignment of a single grid child within an area, select the grid child and update the self alignment settings in the Style panel.
Learn more about grid alignment settings.
Reposition and resize grid areas
Any element within a grid template area will be move and resize with the area.
To reposition an area, edit the grid and drag the area to its new position. To resize it, drag the corner. Since areas can’t overlap, so you may need to resize areas to reorganize them in the grid before respanning them.
Design grid areas for different screen sizes
Redefining areas is particularly useful when designing for different screen sizes. Reposition and resize areas on individual breakpoints to create different layouts on devices.
Reuse layouts with grid template areas
Each template area you define is applied to the parent grid class which you can reuse throughout your project.
To reuse a layout you created with grid template areas, apply the parent grid class to another element. From there, you can drag content into the new template area and create a the same layout with new content — in just a few clicks.
Create reusable templates
So, grid layouts with defined template areas can serve as layout templates that you can reuse across your project. For example, you can create page layouts by defining a header area, a footer area, and a main content area. Or, you can define a card layout by defining an image area and a text area.
Adjust areas across multiple instances of a layout
These layout templates act like layout-only symbols. You can quickly update all instances of a layout across your site by updating a single instance of it.
But, be mindful when adjusting layouts with areas since adjusting areas affects content positioning. You can always use combo classes if you need to adjust a grid template area on a single instance.
Check the grid for responsiveness
If you’ve used the same grid layout in multiple instances in your project, go back to check your design on all pages and breakpoints. Do the same when you update any instance of a layout template.
- Make sure that all your content is positioned correctly and responsively
- Update any other styles to ensure all pages are responsive
Check the grid for accessibility
Just like manually-positioned grid children, grid areas children are explicitly defined on the grid and are similarly identified by the same icon in the navigator. What this means is that when these children move as you move grid areas, their position in the document order doesn't change. To build an accessible site, be mindful of this fact when moving areas in your grid.
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 in the order you want users to read your content. This action should not affect the positioning of these children on the page.
Common questions
What happens if I rename or delete an area?
When you delete an area, any 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.
You can also manually reposition these children in every instance of the grid just change the position of each child to “auto” or “manual” positioning.
What happens if I position multiple-items into a grid area?
The content 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 use an area to define a section in the grid by adding a background. Then, you can add the manually position header content in the grid cells.
- Create a Header area that spans the 4 columns of the first row
- Position a div-block in the header 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 can do so with Collection items within Collection lists.
