Grid regions

Grid regions enable you to craft reusable arrangements that you can easily rearrange. Insert grid children into the grid regions, shift the regions around, and observe as all the content adjusts with the region — automatically updating every occurrence of the grid.

By utilizing grid regions, you can:

• establish reusable grid layouts
• modify grid layouts on various devices by reorganizing the regions
• upgrade multiple instances of a grid layout simultaneously

Throughout this article, you will discover:

1. How to devise a layout with grid regions
2. How to include, place, and align content in grid regions
3. How to relocate and resize grid regions
4. How to construct grid regions for diverse screen sizes
5. How to recycle layouts with grid regions
6. How to inspect the grid for accessibility
7. FAQ

How to devise a layout with grid regions

Once you’ve established a grid, you can outline areas on your grid to generate a reusable layout.

Delimit grid template regions

You can insert grid regions directly on the canvas. Enter grid edit mode, hover over a grid cell, and click the “plus” icon that emerges. After adding a grid region, you can click and drag the corner to encompass and reposition the region. You can also click the region label and specify the position in the settings modal, or navigate to the Style panel, click the region label, and define the position.

Identify regions

To assign names to grid regions, access grid edit mode, click the region label, and enter a Name. Grid region names are useful to describe the role of the region (e.g., “footer”) or the type of content it will contain (e.g., “main image”).

How to include, place, and align content in grid regions

After defining your grid regions, you can incorporate elements into each grid region. These elements become a grid child of that region and will automatically adjust with the region.

To relocate elements within the grid, select the element, navigate to Style panel > Grid child > Position, set it to Area, and choose the region in which you wish to position the element from the Grid region dropdown.

Align content within a region

Grid children positioned within regions will inherit alignment settings from the parent grid. To modify the alignment of a single grid child within a region, select the grid child, visit Style panel > Grid child > Align, and select the desired alignment setting.

How to relocate and resize grid regions

Any element within a grid region will move and resize with the region.

To move a region, enter grid edit mode and drag the region to a new position. To resize the region, drag its corner. As regions cannot overlap, you may need to resize them before re-spanning a region.

How to develop grid regions for diverse screen sizes

Revising regions is especially advantageous when designing for various screen sizes. You can reposition and resize regions on individual breakpoints to alter layouts on different devices.

How to recycle layouts with grid regions

The parent grid class pertains to each grid region you define. To recycle a grid region layout, apply the parent grid class to another element (e.g., a div block). Subsequently, you can drag content into the new grid region(s) and build the same layout with fresh content.

This approach is beneficial, for instance, for generating reusable page layouts. You can delineate a header region, a main content region, and a footer region. Alternatively, you can form a card layout with an image region and a text region.

Modify grid regions throughout multiple occurrences

These grid region layouts function similarly to components. You can promptly update all instances of a grid region layout across your site by modifying a single instance of it. Exercise caution when modifying grid region layouts as it may impact content positioning. You can always utilize combo classes if you need to adjust a grid region on a single occurrence.

How to inspect the grid for accessibility

Just like manually-positioned grid children, grid region children are explicitly outlined in the grid. When these children adjust along with grid regions, their position in the document order remains unchanged. Be attentive to this when moving regions in your grid to ensure site accessibility. Confirm that you move the regions for organizational purposes, and that the reading order is unaffected by it.

Rearrange the explicit grid children in the Navigator to align with the order you wish users to read your content. This action will not impact the positioning of these grid children on the page.

FAQ

What occurs if I rename or remove a region?

When you remove a region, grid children positioned in that region will transition to auto-generated rows and columns. To reinstate these children, reinsert a region with the same name.

What happens if I insert multiple elements into a grid region?

The elements will overlap. You can rearrange these elements in the Navigator or utilize z-index to adjust the overlap sequence.

Am I able to insert grid children in cells that are part of a grid region?

Yes, auto-positioned or manually-positioned grid children can occupy cells that are also part of a region.

For example, you can generate a spanned grid region with a background color. Subsequently, you can insert manually-positioned header content in the grid cells:

1. Create a “Header” grid region that spans 4 columns of the first row
2. Position a div block within the “Header” grid region and define a background color
3. Manually position a logo in column 1 row 1
4. Manually-position and span a navbar from column 2 to 4 in row 1

Can I delineate grid regions for Collection lists?

You cannot delineate grid regions for Collection lists, but you can delineate grid regions for Collection items within Collection lists.