The Grid Editor is a visual tool for building CSS Grid layouts in Divi 5. Instead of setting column counts, track sizes, and item placement with numeric fields alone, you open a floating editor and shape the grid directly - dragging lines to resize columns and rows, dragging the space between them to adjust gaps, and moving or resizing items into the exact cells you want.
It works on any element that uses Grid layout, so you can use it on a Section, Row, Column, or Group.
When the Grid Editor Is Available
The Grid Editor only appears once an element is set to use Grid layout.
Open the element's settings,
Go to the Design tab → Layout → Layout Style
Choose Grid.
The Flex, Grid, and Block styles each expose different controls, and the Grid Editor is tied to Grid.
Note: If you switch an element's Layout Style away from Grid while the editor is open, the editor closes automatically - it only works on grids.
Opening the Grid Editor
There are three ways to open it, depending on where you are:
From the Layout option group
Go to the Design tab → Layout → Layout Style.
Choose Grid.
Click the Open Grid Editor button in the Layout option group. The button changes to Close Grid Editor while the editor is open.
From a Content Tab
Go to the Design tab → Layout → Layout Style.
Choose Grid.
Go to the Content tab → Elements.
Click the Open Grid Editor button.
When inserting a new Row
Click the Blue + icon
to insert a new sectionIn the Insert Section modal, scroll down.
Click on the Build Custom Grid button.
The Grid Editor opens as a floating, draggable panel. You can move, resize, and expand it, and it stays open while you work in the builder - it behaves like a tool palette rather than a pop-up that disappears when you click away.
Note: The new row will automatically have its Layout Style set to Grid in the Design tab → Layout → Layout Style.
Setting up Your Grid
The top of the editor holds quick fields for the settings you'll adjust most often:
Columns - defines the number of columns in the grid.
Rows - defines the number of rows.
Horz. Gap - defines the horizontal spacing between items. This gap applies in both Flex and Grid layouts.
Vert. Gap - defines the vertical spacing between items.
Grid Items - defines how many sample placeholder items are shown in the preview.
Note: The Grid Items field only changes how many placeholder boxes you see while designing. It does not add real content, columns, or items to your layout.
Alongside these are three display toggles that control what you see while editing:
Show/Hide Grid Editor,
Show/Hide Grid Lines, and
Show/Hide Track IDs. Turning on Track IDs labels each grid line so you can place items precisely.
Editing the Grid on the Canvas
The main area of the editor is a live canvas that mirrors your grid. You shape the layout by interacting with it directly:
Resize a column or row: drag one of the grid lines. The tracks on either side resize in real time.
Adjust a gap: drag the space between two tracks. A tooltip shows the current gap size as you drag.
Add or remove columns: use the floating + and - buttons on the canvas.
Set an exact track size: each track has a small input where you can type a value or scrub it by dragging.
Move an item: drag a numbered preview item into a different cell.
Resize an item: drag any of its four corner handles to make it span more columns or rows.
When you move or resize an item, the Grid Editor remembers that placement as a rule for that specific item (see Targeting specific items below). Items that have a rule show a small chip with the rule's name, plus quick edit and delete icons.
Fine-Tuning Columns and Rows
For precise control, the Layout option group in the sidebar carries the full set of grid settings, and the canvas is a visual front end for the same values. The most useful ones:
Column Widths - choose how columns are sized: Equal Width Columns, Equal Minimum Width Columns, Equal Fixed Width Columns, Auto Width Columns, or Manual Width Columns. Your choice reveals the matching width field (a minimum width, a fixed width, or a template).
Grid Column Template - for Manual Width Columns, enter a raw column pattern such as
1fr 2fr 1fr.Row Heights - the row equivalent: Auto, Equal, Minimum, Fixed, or Manual Height Rows.
Grid Direction - whether items flow by Row or Column when they're placed automatically.
Grid Density - Auto places items in order; Dense back-fills gaps left by larger items.
Justify Items - how each item aligns inside its cell: Start, Center, End, Stretch, or Baseline.
💡 Pro tip: Justify Content, Align Items, and Align Content are shared with Flexbox, but in Grid they align the whole grid within its container and align items within their cells. If you've used Flexbox in Divi 5, the controls will feel familiar.
Targeting Specific Items with Grid Offset Rules
Most grids are even, but real designs often need one item to span two columns, or every third item to break the pattern. Grid Offset Rules let you do this without touching CSS.
In the Layout group, open Grid Offset Rules and click Add Grid Offset Rule. The Edit Grid Offset Rule editor opens, where you set:
Admin Label - an optional name so you can recognize the rule later.
Target Offset - which items the rule applies to: First Item, Last Item, Even Items, Odd Items, Every Third Item (through Every Tenth Item), or a Custom nth-child Rule where you type a pattern like
3n+1.The placement values - Column Span, Column Start, Column End, Row Span, Row Start, Row End, and Grid Template Columns. Fill in only the ones you need; leave the rest empty to keep them out of the generated CSS.
Every rule you build on the canvas by dragging an item automatically creates the Grid offset rule for that particular grid item.
For example, moving an item sets its Column Start and Row Start, and resizing it sets its Column Span and Row Span. The canvas and the rule list are two views of the same thing, so you can rough out a layout by dragging and then fine-tune the exact numbers in the rule editor.
Note: If you're opening an older layout that used Divi's earlier grid-offset format, Divi upgrades it to the current Grid Offset Rules automatically - you don't need to recreate anything.