CSS Grid support in Divi 5 introduced a good two-dimensional layout system that allows you to control the structure without having to rely on workarounds. And within that system Raster compensation gives you direct control over where an element starts, how far it extends, and how high it runs in the grid. You define the position in the structure itself, rather than pushing things into place.
Once you understand how beginning and span work together, you can build flexible layouts without the mess or hacks.
How grid positioning works
Divi 5’s Grid Offset Editor gives you precise control over where modules go in your layout. But placing elements on a grid makes a lot more sense once you see what’s actually being built when you enable Grid.
Grids are built on lines
When you enable Grid on an element, an invisible structure is created. Vertical lines define columns and horizontal lines define rows. The modules you place in them are in the spaces between those lines.
Look at the grid above. The white vertical lines at the bottom are numbered from 1 to 4. These are column lines. The orange horizontal lines, numbered 1 to 4 on the left, are row lines. The spaces in between are the holes where your content lives.
Here’s what most people miss: In this three-column grid, you’re not working with three things. You work with four column lines. The columns themselves are just the spaces between those lines.
Each module you place is positioned by telling it which line it should start on and how far it should extend. Do you want a module in the middle column? Tell it to start at column line 2 and cover 1 column, ending at line 3.
Beginning, reach and end
Three settings determine where each element lives. The start line is where the module starts. The span is how many tracks (columns or rows) it covers. The end line is where it ends.
Suppose you set Column Start to 1 and Column Span to 2. The module starts on line 1 and extends to line 3, covering the first two columns.
Change Column Start to 2 and the module will start on the second line. Combined with your range value, it shifts to the next available column space.
The same logic applies vertically. A module with Row Start at 2 and Row Span of 2 covers rows 2 and 3, between row lines 2 and 4.
Why this is important for compensation
When you apply an offset, you change the location of a module’s starting line. Column start 2 moves the module so that it starts on the second column line. The range setting then determines the amount of space it takes up from that starting point.
This line-based positioning makes grid layouts stable and predictable. You lock modules into precise locations on an invisible framework, rather than pushing things around and hoping they land in the right place.
When you enable Grid on a section or row in Divi, the builder automatically creates this line structure based on your column and row settings. You decide how many columns you want, and Divi draws the necessary lines to form that grid. Modules are automatically placed in the order they appear, filling columns from left to right and rows from top to bottom.
But if you need a module to sit somewhere specific (such as skipping the first column or spanning multiple rows), use the Raster offset editor to override the automatic placement and place modules exactly where you want them on those numbered lines.
Which you can actually control with the Grid Offset Editor
When Divi introduced CSS Grid, it gained the ability to directly structure layouts using rows and columns. Previously, most complex layouts relied on padding adjustments, empty placeholder columns, or duplicate sections to position elements.
These distance tricks worked for simple structures, but fell apart at various breaking points. A grid is two-dimensional, so you can control where each element is placed horizontally and vertically without these workarounds.
Subscribe to our YouTube channel
Once your grid is set up, the Raster offset editor This allows you to adjust the placement of individual modules within it. You apply rules to move, stretch, or reorder elements within the existing grid structure.
It opens when you click + Add raster compensation rule.
Give it a label and then determine which element the offset rule should apply to Goal Compensation dropdown:
The Offset rule dropdown gives you 7 important rules that cover almost every layout scenario.
- Column range: Sets how many columns a module covers. Ideal for full-width headlines or wide images.
- Column start: Moves a module horizontally by choosing the column line where it starts. Useful for spread card layouts or centered content.
- Column break: Defines where it stops horizontally. Combine with Column Start for precise placement.
- Driving span: Sets how many rows a module covers. Perfect for tall images or marker blocks that stretch vertically.
- Row start: Moves a module down by choosing the row line where it starts. Ideal for distributed or responsive flows.
- End of row: Defines where it stops vertically. Works best in combination with Row Start.
- Grid template columns: Defines the column track size for the target grid item (so that one item can have its own internal column structure).
Finally, set the Offset value as 1, 2, 3, etc. to give a position change parameter.
Each of these settings fixes a layout problem that previously required workarounds or duplicate sections. By applying a rule you place modules exactly where you want them. Once you understand how these pieces fit together, positioning becomes deliberate and quick.
Every offset rule you create is automatically adjusted on desktop, tablet, and mobile views. By default, Divi applies the same rule to all breakpoints, keeping your layout consistent. If you need different positioning on smaller screens, you can override any rule at the tablet or mobile level.
Learn all about Divi 5’s grid system
Using offset rules in real layouts
Now that you understand how the offset controls work, let’s see how they solve real-world layout challenges.
1. Create full-width elements
Sometimes you need one element to span the entire width, while other modules remain in their columns. Set the column range to match your total number of columns, and the module will expand immediately without affecting anything else around it.
The real power comes from how you focus on elements. Apply the tension rule to the first item in the grid to create a hero section at the top. Focus on the last item to create a full-width footer block. Need something more specific? Use the nth child rule to expand each module based on its position, such as creating the third full-width card in a product grid.
You set a single rule that determines placement based on the structure, so the layout automatically adjusts as you add or remove content. The same approach works in two dimensions when you link Column Range to Row Range, creating wide and tall blocks.
Column Span also combines with Column Start to move full-width modules lower in the grid. Targeting also goes beyond the nth child. You can target even or odd items for alternating full-width sections, or use first and last to handle edge cases.
2. Create staggered layouts
Staggered layouts add visual interest by shifting elements rather than aligning them uniformly. Column Start and Row Start allow you to shift specific modules so that they start on a different column line, creating an offset effect naturally.
Set your grid to three rows, then target every third item and set Row Start to different numbers. These modules shift, leaving space in previous columns and creating a clean staggered pattern. The layout remains structured, but the rhythm breaks the monotony. The spreading works because you determine where the elements start.
If you need more control over how much space each element takes up, link Column Start to Column Span. A module that starts at column 2 and spans two columns creates a different visual weight than a module that starts at column 2 and spans 1. You can also stack row starts across several nth child lines. Every second item is offset slightly, and every fourth item is offset more, giving you rhythm variations without building separate grids.
3. Stretch elements vertically
Not every element needs the same height. Row Span lets you stretch a module vertically across multiple rows, making it stand out without disrupting the grid structure. Set your grid to three rows, then focus on a specific item and set Row Span to 2 or 3. That module extends larger and covers multiple row tracks while surrounding elements flow naturally around it.
Featured content, highlight cards, and images that need more visual weight all benefit from this approach.
The grid keeps everything in place while telling one element to take up more vertical space. Row Span works with Column Span if you want featured cards that dominate both dimensions. A module with row range 2 and column range 2 becomes a focal point in a map grid.
You can also place tall cards lower in the layout using Row Start with Row Span, creating asymmetrical designs where the visual weight shifts across the page. For responsive layouts, different row range values work at each breakpoint. A tall card on a desktop can span three rows, but on mobile devices, where vertical space is more important, you can shrink it to one row.
Try CSS Grid in Divi 5 today!
Grid Offset in Divi 5 puts precise positioning control in a visual interface. Once you understand how lines, spans, and starting positions work together, building layouts becomes intentional instead of guesswork. The structure is preserved on any screen size, because you define the position in the grid yourself.
Complex layouts no longer need filler tricks, empty columns, or duplicate sections. You apply offset rules that tell each module exactly where it should sit, and the layout adapts as your content changes. The same principles work whether you’re creating full-width hero blocks, staggered map layouts, or high featured sections.
#Mastering #Divi #Grid #Offset #Editor