The Grid Offset Rules option is part of the CSS Grid feature, and it allows you to create rules to target and style specific child grid items using nth-child selectors by defining custom positioning, spanning, and layout properties for individual grid items to create complex, asymmetrical grid layouts.
How to Use the Grid Offset Rules Option
Open the settings of any element, such as Section, Row, Column, or Group module.
Navigate to the Design tab → Layout.
Expand the Layout Style dropdown.
Choose Grid.
Click on the + Add Grid Offset Rule.
When a new Grid Offset Rule is created, a new modal window appears:
Admin Label (optional): It allows you to set a custom admin label for the offset rule.
Target Offset: It allows you to choose which grid item the rule applies to:
First Item: It targets the first item inside the grid.
Last Item: It targets the last item inside the grid.
Even Items: It targets all even items inside the grid (item 2, item 4, item 6, etc.).
Odd Items: It targets all odd items inside the grid (item 1, item 3, item 5, etc.).
Every Third Item: It targets every item inside the grid whose position is a multiple of 3 (item 3, item 6, item 9, etc.).
Every Fourth Item: It targets every item inside the grid whose position is a multiple of 4 (item 4, item 8, item 12, etc.).
Every Fifth Item: It targets every item inside the grid whose position is a multiple of 5 (item 5, item 10, item 15, etc.).
Every Sixth Item: It targets every item inside the grid whose position is a multiple of 6 (item 6, item 12, item 18, etc.).
Every Seventh Item: It targets every item inside the grid whose position is a multiple of 7 (item 7, item 14, item 21, etc.).
Every Eighth Item: It targets every item inside the grid whose position is a multiple of 8 (item 8, item 16, item 24, etc.).
Every Nineth Item: It targets every item inside the grid whose position is a multiple of 9 (item 9, item 18, item 27, etc.).
Every Tenth Item: It targets every item inside the grid whose position is a multiple of 10 (item 10, item 20, item 30, etc.).
Custom nth-child Rule: it allows you to define a custom
nth-childselector for the grid items. For example:5: Selects the fifth item in the grid.3n: Selects every 3rd element in the grid (item 3, item 6, item 9, etc.)3n+1: Selects grid items 1, 4, 7, 10, etc.3n+2: Selects grid items 2, 5, 8, 11, etc.-n+3: Select the first 3 grid items (item 1, item 2, and item 3)
Offset Rule: Choose the offset rule that will apply to the Target Offset (element):
Column Span: The Width of the selected target will span the number of columns.
Column Start: The target element will start from the designated column number.
Column End: The target element will end at the designated column number.
Row Span: The height of the selected target will span the number of rows.
Row Start: The target element will start at the specified grid row number.
Row End: The target element will end at the specified grid row number.
Grid Template columns: Defines the line names and track sizing functions of the grid columns.
Offset Value: Defines the number value for the Offset Rule.