CSS Grid gives you precise control over two-dimensional layouts. Instead of arranging items in a single row or column, you can define rows and columns at the same time, then place items across that structure. Divi 5 brings this directly into the Visual Builder, so you can build layouts that used to require nested rows or custom CSS.
This guide takes one Row of six Columns and reshapes it three different ways using Row-level Grid controls. You'll start with a Structure Template, then add Grid Offset Rules, then build a masonry-style layout with responsive overrides. The content and Column styles stay the same - only the Row's Layout settings do the work.
Before You Begin
Have a Section with a Row open in the Visual Builder. This guide uses a Row containing six Columns with content already added.
For background on the feature, see Understanding Divi's CSS Grid Layout and Understanding Grid Offset Rules in Divi 5.
How CSS Grid Works
CSS Grid uses two layers of control.
The parent container (such as a Section, Row, Column, or Group) defines the structure - how many columns and rows, the gap between them, and the default alignment.
Each child item can then override its own placement, spanning multiple cells or aligning differently from its siblings.
In Divi 5, the Layout option group on the parent controls the grid structure. The Sizing option group on each child controls how that child sits inside the grid.
💡 Tip: A grid column is part of the CSS Grid structure. A Divi Column is a container element you add to a Row. They are not the same thing, but they work together.
Set the Row to Grid
Open the Row settings
Go to Design → Layout.
Expand the Layout Style dropdown and choose Grid.
In the Number of Columns field, type 6.
Go to the Row's Content tab → Elements.
Add or duplicate the existing column 5 more times.
If at this point, you go back to the Desing tab → Layout → Number of Columns and change it to 3 the Row's layout will change displaying 3 columns / row.
Understanding the Row-Level Layout Settings
When a Row's Layout Style is set to Grid, the Layout option group controls the structure. The main settings are:
Horizontal Gap and Vertical Gap: Spacing between grid columns and rows.
Column Widths and Number of Columns: How grid columns are sized and how many there are.
Row Heights and Number of Rows: The same controls for rows.
Grid Auto Columns and Grid Auto Rows: The size of tracks Divi generates automatically when items fall outside the defined grid.
Grid Direction and Grid Density: How items auto-place through the grid, and whether empty cells get backfilled.
Justify Content, Align Content, Align Items, and Justify Items: Positioning of the whole grid and the default alignment of items inside their cells.
Collapse Empty Columns: Helps with dynamic layouts where some cells may be empty.
Offset Rules: Position-based rules applied to child items from the parent. Useful for repeating, asymmetric patterns.
To control a single child (a column, in this case) instead:
Open the settings of any column
Go to the Column's Desing tab → Sizing, click into a Column, open Design → Sizing.
Use Column Span, Row Span, the Start/End line controls, or Align Self and Justify Self.
The grid item settings appear below the standard Width, Height, and Module Alignment options:
Column Span and Row Span: Control how many grid tracks the item occupies. For example, setting Column Span to 2 makes the item span two grid columns.
Column Start, Column End, Row Start, and Row End: Pin the item to specific grid lines. Use these when a span value is not precise enough, such as when an item needs to start at column 2 and end at column 5.
Align Self and Justify Self: Override the parent’s default alignment for that item only.
Exploring What’s Possible With CSS Grid In Divi 5
CSS Grid is a logical way to control how child elements behave inside a container. As you saw above, the parent can define the overall grid while individual children can still break from the default pattern.
To focus on Grid, we’ll keep using the six-Divi-Column structure from the previous section. The content and general styles are already in place. Therefore, the examples below focus only on changing the grid layout.
The layout variations will be covered:
Variation 1: A simple grid created with a Structure Template.
Variation 2: An alternating grid created with a Structure Template and Grid Offset Rules.
Variation 3: A masonry-style grid created with multi-property offset rules and responsive overrides.
Variation 1: Apply a Strucutre Template
A Structure Template configures the grid settings for you in one click.
Open the Row's settings modal
From the Content tab → Elements.
Click the Apply Structure Template button.
Choose the 3rd template from the Grid Multi-Row section.
Variation 2: Use Grid Offset Rules
Download this starting page layout and import it to your page.
Open the Row settings and from the Content tab → Elements, click on the Apply Strucutre Template button.
From the Grid Multi-Row, choose the 11th premade structure.
Go to the Row's Desing tab → Layout → Grid Offset Rules.
Here you will find two offset rules. Click on the pen icon to open the rule editor.
Rule 1: Span Every 4n+2 Item
Admin Label: Auto-generated from the rule settings, such as 4n+2 Spans 2 Columns.
Target Offset: Custom nth-child Rule, with the pattern set to 4n+2. This matches the 2nd item, then every 4th item after that: 2, 6, 10, and so on.
Offset Rule: Column Span. This tells Divi which grid property to change on the targeted items.
Offset Value: 2. This makes each targeted item span two column tracks instead of one.
Rule 2: Span Every 4n+3 Item
The second rule does the same thing, but targets a different set of child items.
Admin Label: Auto-generated from the rule settings, such as 4n+3 Spans 2 Columns.
Target Offset: Custom nth-child Rule, with the pattern set to 4n+3. This matches the 3rd item, then every 4th item after that: 3, 7, 11, and so on.
Offset Rule: Column Span. This changes the same grid property as the first rule, but for a different item pattern.
Offset Value: 2. This makes each targeted item span two column tracks.
Together, the rules create an alternating rhythm: the 2nd and 3rd items in each group of four span two columns, while the 1st and 4th stay one column wide.
💡 Tip: To start with a larger item instead, change the patterns to 4n+1 and 4n+4.
Variation 3: Create A Masonry-Style Grid
Download this starting page layout and import it to your page.
Open the Row settings and from the Content tab → Elements, click on the Apply Strucutre Template button.
From the Grid Masonry, choose the 2nd premade structure.
Go to the Row's Desing tab → Layout → Grid Offset Rules.
Here you will find two offset rules. Click on the pen icon to open the rule editor.
Rule 1: Span Every 6n+1 Item Across Rows
Admin Label: Auto-generated from the rule settings, such as 6n+1 Items Span 2 Rows.
Target Offset: Custom nth-child Rule, with the pattern set to 6n+1. This matches the 1st item, then every 6th item after that: 1, 7, 13, and so on.
Offset Rule: Row Span. This changes how many row tracks the targeted item occupies.
Offset Value: 2. This makes each targeted item take up two row tracks instead of one.
From top to bottom, the rule says: target items 1, 7, 13, and onward, and make each one twice as tall. This creates the tall anchor item at the start of each group of six.
Rule 2: Span Every 6n+6 Item Across Columns
The second rule works on the other axis.
Admin Label: Auto-generated from the rule settings, such as 6n+6 Items Span 2 Columns.
Target Offset: Custom nth-child Rule, with the pattern set to 6n+6. This matches the 6th item, then every 6th item after that: 6, 12, 18, and so on.
Offset Rule: Column Span. This changes how many column tracks the targeted item occupies.
Offset Value: 2. This makes each targeted item span two column tracks instead of one.
⚠︎ Note: Offset Rules repeat automatically. If you add more Columns, the same pattern applies every six items - useful for dynamic and Loop Builder layouts where the item count changes.
Make the Masonry Layout Responsive
A 4-column masonry grid can feel cramped on small screens. Grid settings can be overridden per breakpoint.
Switch the Visual Builder to the Tablet breakpoint.
Open the Row's settings and go to the Design tab → Layout, and set Number of Columns to 2.
Switch the Visual Builder to the Phone breakpoint, and:
Set the Number of Columns to 1
Create a new Grid Offset Rule:
Target Offset: Custom nth-child Rule
Custom Nth-Child Rule: 3
Offset Rules: Column Span
Offset Value: 1
Download the Example Layouts
Read the full tutorial
Read the complete step-by-step guide on the Elegant Themes blog: Part 11: Mastering CSS Grid in Divi 5.
Previous Course | Next Course |
|