Design reusable, responsive grid layouts and variants with grid template areas.
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:
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.
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.
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.
Once you’ve defined your grid areas, you can add and assign content to each grid area that will automatically move with the 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.
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.
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.
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.
Redefining areas is particularly useful when designing for different screen sizes. Reposition and resize areas on individual breakpoints to create different layouts on devices.
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.
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.
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.
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.
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.
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.
The content will overlap. You can reorder these elements in the navigator or use z-index to change the overlap order.
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.
You can't define grid areas for Collection lists, but can do so with Collection items within Collection lists.