Divi 5 has supported CSS Grid as a layout style for a while, but setting one up meant typing track values into fields and picturing the result in your head. The new Grid Editor turns that into a canvas. You drag grid lines, stretch items across cells and watch the layout take shape, and Divi writes the CSS Grid rules behind it. This guide walks through a real build, from an empty row to a layout that holds up on a phone. It's the same process I use on client sites as a Divi 5 specialist.
The Grid Editor only appears when a container's Layout Style is set to Grid. It shapes the container, not the modules inside it: you draw the frame first, then fill it. The Grid Items field adds preview placeholders so you can see the shape. It does not add real content.
Open the Grid Editor
There are three ways in, and they all land in the same editor:
Three toggles at the top control what you see while you work: Show/Hide Grid Editor, Show/Hide Grid Lines and Show/Hide Track IDs. I keep the grid lines and track IDs on until the layout is final. They make it obvious which line an item starts and ends on.
Set the Structure: Columns, Rows and Gaps
Five fields across the top of the editor define the grid:
| Field | What it does |
|---|---|
| Columns | How many column tracks the grid has. |
| Rows | How many row tracks the grid has. |
| Horz. Gap | Space between columns. |
| Vert. Gap | Space between rows. |
| Grid Items | How many preview placeholders to show. Visual only; no content is added. |
You don't have to type anything if you'd rather work visually. You can drag a grid line to resize a column or row, drag a gap to widen it, and use the floating + and - buttons to add or remove columns. If you need an exact size, type it straight into the track's input field.
Column and row sizing
Under the Layout group you'll find the sizing options that decide how tracks behave when the screen changes:
| Setting | Options | When I use it |
|---|---|---|
| Column sizing | Equal Width, Equal Minimum Width, Equal Fixed Width, Auto Width, Manual Width Columns | Equal Width for card grids. Manual when one column should be wider than the rest. |
| Row sizing | Auto, Equal, Minimum, Fixed, Manual Height Rows | Auto for most content. Equal when every card in a row should match. |
| Grid Column Template | Type a pattern, for example 1fr 2fr 1fr | The quickest way to get an uneven layout, like a wide centre column. |
| Grid Direction | Row or Column | Row for almost everything. Items fill left to right, then wrap. |
| Grid Density | Auto or Dense | Dense back-fills gaps left by items with mixed spans (see the warning below). |
| Justify Items | Start, Center, End, Stretch, Baseline | Stretch so items fill their cell. |
Shape the Items: Spans and Placement
This is where the editor earns its keep. Drag the corner handle on any preview item to stretch it across more cells. Drag an item itself to move it somewhere else in the grid. You're not writing any CSS. Each time you resize or move an item, the editor writes a Grid Offset Rule for you. You'll see them listed in the Layout group.
It helps to know how those rules read. A grid has invisible numbered lines, not numbered boxes. An item is placed by where it starts, how many tracks it spans, or where it ends. Column Start 1, Column Span 2 means the item begins at line 1 and covers two columns, so it finishes at line 3.
Writing a rule by hand
You can also add rules yourself with Add Grid Offset Rule. Each rule has an Admin Label, a Target Offset that picks which items it applies to, and the placement values: Column Span, Column Start, Column End, Row Span, Row Start and Row End. Targets include First Item, Last Item, Even Items, Odd Items, Every Third through Every Tenth Item, and custom nth-child patterns. That's how you get a pattern like "every fourth card is double width" without touching each card.
Add the Real Content
Once the frame is right, add your actual modules (images, text, blurbs, anything) as children of the container. Because the grid rules live on the container and not on the modules, you can swap content in and out later without rebuilding the layout. That's the biggest practical difference from the old approach of padding and margins on individual modules.
Images are where a grid usually looks off. If a photo's proportions don't match its cell, set the image's Framing to Cover and use Object Position to decide which part of the photo stays in view.
Make It Work on Tablet and Phone
Grid settings cascade: what you set on desktop carries down to tablet, and tablet carries down to phone, until you override it. So switch to Tablet view and simplify, then do the same on Phone. A four-column grid usually wants two columns on a tablet and one on a phone, with the gaps tightened to match.
Check every item that spans several columns. An item set to span three columns in a grid you've cut down to two can force extra columns and throw the layout off. Reduce or remove the span at that breakpoint. Also test between the round numbers: many real tablets report widths around 820px, inside the range where layouts most often break, so check there as well as at Divi's breakpoint edges.
Things That Will Save You an Afternoon
- Grid Items is preview only. Setting it to 12 does not give you 12 modules. Add the real modules in Phase 4.
- Switching Layout Style away from Grid closes the editor. If the editor vanishes, check that the container is still set to Grid.
- Dense can reorder what visitors see. Dense packing fills gaps by moving later items up, but screen readers and keyboard users still follow the order in the HTML. Don't use Dense where the order carries meaning, like steps or a timeline.
- Build the frame before the content. Laying out placeholders first and adding modules last is much faster than dragging finished modules around.
- Name your offset rules. The Admin Label field costs nothing, and "Feature card - 2 cols" is far easier to find later than a list of unnamed rules.
Quick Reference — Key Settings
The Grid Editor makes layouts possible in Divi 5 that used to take custom CSS, and it does it in a way a client can still edit later. If you'd rather have a Divi 5 layout built or an older Divi site moved onto it, that's exactly the work I do as a Divi specialist.
