Knockout grids are grid sections that use empty cells as a design element. Image blocks, text panels and colour areas sit against deliberate negative space, and the contrast between filled and empty is what makes them read as layered rather than as a table.
Elegant Themes released seven of them free for Divi 5. Here's how to import them and, more usefully, the rules that keep them looking right once you've replaced the content.
TL;DR: Download the pack, import via Divi > Divi Library > Import & Export > Import, then add to a page with Add From Library. Replace text before images. Resize by duplicating or deleting existing rows and modules rather than rebuilding. Keep some cells empty — that's the whole point of the format.
What's in the Pack
Eight JSON files in divi-5-knockout-grids.zip:
- Styled – Knockout Grids Section 1 through 7 — the individual sections
- Styled – Knockout Grids Sections (All) — imports all seven into the Divi Library in one go
Each section combines image grids, layered content blocks, colour treatments, text panels, buttons and structured spacing. The intended uses: landing pages, hero sections, portfolios, real estate, service pages, design studios, travel and editorial layouts.
The download sits behind a newsletter signup, including for existing subscribers, and there's a confirmation email step. Divi 5 is required.
Importing and Placing
Import:
- Unzip the download.
- Go to Divi > Divi Library.
- Click Import & Export at the top.
- In the Import & Export Layouts modal, open the Import tab.
- Click Choose File, pick a JSON, then Import Divi Builder Layouts.
Place:
- Open a page in the Visual Builder.
- Add a new Section.
- Click Add From Library and choose a knockout grid section.
Import the "(All)" file if you want to browse all seven in the builder and decide by eye. Import individually if you already know which one you want and would rather keep the Library tidy.
The Editing Order That Doesn't Break Things
Text first, images second. Replace headings, body copy, buttons, labels, captions, service details, property text, portfolio copy and CTAs. Only then swap the images, background photos, product visuals and screenshots.
The reason is that copy length changes the balance. A heading twice as long as the placeholder rewraps and eats the negative space the layout depends on. Judge your images against your real copy, not against Lorem Ipsum.
Work one area at a time. These sections balance imagery, typography, spacing and negative space against each other, and changing three things at once means you can't tell which change caused the problem.
To resize: duplicate or delete existing rows, columns, groups, image modules, text modules and buttons rather than building new ones from scratch. That preserves the grid structure and rhythm you're paying for.
What to Adjust Where
| Goal | Path |
|---|---|
| Typography | Text or Heading module → Design → Font, Font Weight, Text Alignment, Text Color, Text Size, Letter Spacing, Line Height |
| Structure and visuals | Section / Row / Column / Group / Module → Content and Design → Background, Border Width, Border Color, Border Radius, Box Shadow, Sizing, Spacing, Position |
| Responsive | Divi's responsive controls for stacking, image height, crop position, spacing, text size, column order, button placement |
Before you start restyling, get your brand values into Divi 5's Variable Manager. Then restyling the pack is picking variables rather than typing hex codes into fourteen modules.
Four Design Rules for Knockout Grids
1. Route the eye deliberately. Use the image blocks, text panels, empty space and colour areas to lead from the main visual to the key message to the CTA. If the path isn't obvious to you, it definitely isn't obvious to a visitor.
2. Leave cells empty. Especially with detailed or high-contrast photography. The empty cells aren't unfinished — they're the reason the filled ones have impact.
3. Keep the text short. Short headings, concise supporting copy, obvious CTAs. Knockout grids turn busy faster than almost any other layout format, and long copy is how it happens.
4. Pick images with strong focal points. Grid cells crop, split and squeeze images. A photo where the subject is centred and unambiguous survives that. A wide scene with detail spread across the frame does not.
The image cropping in particular is worth setting up properly — Aspect Ratio and Object Fit give you control over which part of each photo survives the crop, which matters a great deal when a cell is a narrow vertical slot.
My Take: Import the Structure, Rebuild the Styling
Here's my one strong opinion: treat a free layout pack as a structural reference and throw away everything else it gives you.
I've built over 100 Divi sites and every layout pack I've ever imported has left the same trail: hardcoded colours, one-off font sizes, and border radii that match nothing else on the site. The layout looks great in isolation and slightly foreign everywhere it's placed.
The fix is a workflow, not a judgement call:
- Import the section and keep the grid structure — the cell proportions and negative space are the genuinely valuable part, and the part that took a designer to get right.
- Strip the styling. Reapply your own colour, typography, border and shadow presets.
- Delete the imported Library item once you've adapted it, so nobody re-imports the unstyled version in six months.
Step 3 is the one everyone skips. An unadapted layout sitting in the Divi Library is a loaded gun pointed at your design system.
The structure is worth having, though. Getting the balance of filled and empty cells right by eye takes several attempts, and here it's already done. Same reasoning applies to the free Divi 5 quote sections — import for structure, restyle for consistency.
Two Things That Will Catch You Out
Swapping in images with different proportions changes the whole grid. Image-heavy sections shift quickly when focal points, cropping or contrast change. After a photo swap, review the entire section rather than just the cell you touched — then adjust positioning, sizing, spacing or background settings.
Tablet and phone shift noticeably as columns stack. A knockout grid's negative space is a two-dimensional relationship, and stacking flattens it into one dimension. Check image cropping, text readability, spacing balance and tap-target size at every breakpoint before shipping.
Straight Answers
What is a knockout grid? A grid composition built on contrast between filled and empty cells, using negative space as a deliberate design element.
How do you import a layout JSON? Divi > Divi Library > Import & Export > Import tab > Choose File > Import Divi Builder Layouts.
How do you add it to a page? Visual Builder, add a Section, click Add From Library, pick the imported section.
Text or images first? Text. Copy length changes the grid balance, so settle the words before judging the visuals.
How do you resize a section? Duplicate or delete existing rows and modules rather than rebuilding, to preserve structure and rhythm.
What images work? Ones with a strong, clearly placed focal point, because cells crop and split images aggressively.
The Last Word
Seven free sections with the hard part already solved — the balance of filled and empty cells that makes a grid look composed rather than tiled. That's worth an import.
Just replace text before images, keep some cells empty, and restyle with your own presets before you ship. Then delete the original from the Library.
You need Divi 5 to use these, and if you'd like the pack adapted to an existing brand system rather than dropped in as-is, that's an afternoon's work and it's the difference between "we used a template" and "we have a design."
This is a summary of Elegant Themes' original post, "Knockout Grids For Divi 5". All credit for the original content goes to Elegant Themes.