Perfectly even Grids are useful, but they are not always memorable. Stretch one card, deepen another, or build a diagonal that climbs across the page, and the layout begins to guide the eye with purpose. A few deliberate placement choices can change the entire composition.
Divi 5‘s Grid Editor makes those choices easy to explore. You can resize and reposition items directly on a visual canvas, then see how each change affects the layout before you move on.
In this guide, we will build five creative Grid layouts, each designed to direct attention in a different way.
How CSS Grid Works
Before CSS Grid, designers commonly built page layouts with tables, floats, positioning, and, later, Flexbox. Those methods still have valid uses, but complex two-dimensional layouts often required extra markup or careful workarounds.
CSS Grid provides a layout system built around columns and rows. Their intersections form cells, and child items can be placed automatically or assigned to specific positions within that structure. By default, items follow the Grid’s auto-placement behavior, but you can change their starting points, spans, and flow.
An item can span multiple columns, multiple rows, or both. You can also preserve empty cells, align items to shared tracks, and place multiple items in the same Grid area when a design calls for overlap. The browser still follows the rules you define, which makes asymmetrical layouts easier to control.
Grid tracks can use fixed values, flexible units, content-based sizes, or combinations of all three. That flexibility helps the same structure adapt across different screen sizes, although complex Grids still need responsive adjustments at Divi’s breakpoints.
Why Grid Works For Creative Layouts
Creative layouts often rely on contrast, intentional empty space, varied proportions, and elements that break a uniform rhythm. CSS Grid supports those choices without abandoning an underlying structure.
Empty cells can remain open by design. One item can span several tracks while another stays compact. Items can also share cells for layered effects. These controls make it possible to create magazine spreads, stair-step compositions, pinboards, and other expressive layouts with one two-dimensional system.
How To Build A Grid Layout In Divi 5
When writing CSS by hand, you define properties such as grid-template-columns and grid-template-rows, then add placement or span rules for individual items. Divi 5 exposes the same core concepts through Grid settings in the Visual Builder.
You can begin with one of Divi’s premade Grid templates or create a custom structure.
To turn a Section, Row, Column, or Module Group into a Grid container, open its Design tab, expand Layout, and set Layout Style to Grid. You can use this setting on a new container or an existing one.
Grid Offset Rules let you target child positions from the container. A rule can change where a matching item starts or how many columns and rows it spans. Because the rule belongs to the container rather than the child element, the pattern can continue when matching items are added, duplicated, or generated by a Loop.
How To Use The Grid Editor
The Grid Editor turns those settings and rules into a visual canvas.
When Layout Style is set to Grid, an Open Grid Editor button appears in the Grid settings. Click it to view the container’s columns, rows, gaps, preview items, and offset rules in one place.
Drag a column or row edge to resize a track. Adjust the horizontal and vertical gaps by dragging or entering exact values. To resize an item, drag one of its corner anchors so it spans additional rows or columns. You can also drag and drop an item into another cell to change its position.
These visual changes create or update Grid Offset Rules behind the scenes. The editor also highlights the rules and the positions they affect, making complex patterns easier to understand.
The Grid Items control deserves one clarification: it adds sample items to the editor for visualization. It does not add Columns, modules, or other child elements to the container. Once the preview looks right, add the actual child elements separately in the builder.
Building Five Creative Layouts In Divi 5
Each of the following layouts uses the same Grid Editor tools, but changes the placement strategy. Some establish a clear focal point, some create rhythm through repeated spans, and others use empty cells as part of the composition.
1. The Magazine Lead
The Magazine Lead places one story ahead of the rest. It works well for news pages, blog indexes, portfolios, and any section built around one primary feature with several supporting cards.
Magazine and news sites can use the large block for the lead story. Agencies can place a flagship project there while recent work fills the smaller positions around it.
Add a new Row and choose Build Custom Grid from the structure options.
In the Grid Editor, set Columns to 4, Rows to 3, Grid Items to 12, and Gap to approximately 15px to 20px. The sample items let you see every position while you shape the layout.
Select the sample item in the top-left position. Drag its right anchor one column to the right, then drag its bottom anchor down one row. The item now spans columns 1 and 2 and rows 1 and 2, creating a two-by-two feature area.
Leave the supporting positions at their default one-column, one-row size. Their uniform proportions keep the main feature visually dominant.
Remember that these Grid Items are previews. They show the intended pattern, but they do not create content. Add the required child Columns from the Row’s Content tab, then place your modules inside them.
As the real child elements are added, the container’s Grid and offset rules determine where matching positions appear.
2. The Cascade
The Cascade creates a staircase that moves the eye down and to the right. It suits sections with a clear sequence or a progression from broad information to a concise result.
Useful applications include:
- Process flows: Give the first step the most room, then reduce each following step as the sequence approaches its outcome.
- Feature tiers: Lead with the broadest offering and use shorter cards for progressively focused additions.
- Sequential reveals: Build a narrative across four visual beats.
Add a new Row and choose Build Custom Grid. Set Columns to 4, Rows to 4, Grid Items to 4, and Gap to 0px. With no gap, the cards read as one connected stepped shape.
Resize and position the four sample items as follows:
- Place item 1 in row 1 and span all four columns.
- Place item 2 in row 2, start it at column 2, and span columns 2 through 4.
- Place item 3 in row 3, start it at column 3, and span columns 3 and 4.
- Place item 4 in row 4 and column 4.
Each drag updates the corresponding Grid Offset Rule at the container level.
The open cells in the lower-left area are intentional. They create the diagonal edge that gives the composition its direction. Because the eye finishes at the final card in the lower-right corner, that card is a natural place for an outcome, next step, or call to action.
3. The Pinboard
The Pinboard gives a collection more rhythm by mixing wide, tall, and standard cards. It is useful when items have similar importance but a uniform Grid would feel too repetitive.
Photography and design portfolios benefit from varied crops. Team pages can mix standard profiles with a wide group photo or introduction. Resource libraries and mixed-media feeds can also use the pattern to distinguish formats without creating a strict hierarchy.
In the Grid Editor, set Columns to 4, leave Rows set to auto, and set Grid Items to 8. Use a Gap of approximately 8px to 12px so the cards feel closely grouped while remaining distinct.
Create the pattern by combining three item sizes. Leave standard cards at one column by one row. For a wide card, drag its right anchor across a second column. For a tall card, drag its bottom anchor down across a second row. Reposition the sample items as needed to match the arrangement shown below.
Creating A Repeatable Pattern With Grid Offset Rules
Rules that target individual positions work well for a fixed collection. If a Loop or feed will add items over time, use a repeating target so the visual rhythm continues as the content grows.
Hover over a rule pill and click its edit icon to open the targeting options.
Edit the rule’s target so it applies to every fourth item instead of one fixed position. The two-row span will then repeat for every matching child position.
You can use the same approach for wide cards and other recurring placements. When new child items are added or generated, each matching position receives the container-level rule.
4. The Bookend
The Bookend places two tall anchors on the outer edges and four smaller cards between them. The strong boundaries frame the middle content and keep the composition balanced.
Editorial features can use the anchors for opening and closing images. Sponsor rows can frame standard logos with two featured partners. Comparison sections can also use the outer cards to mark two endpoints while the middle cards hold the options between them.
Set Columns to 4, Rows to 2, Grid Items to 6, and Gap to approximately 10px to 12px. Select the first sample item and drag its bottom anchor down one row so it spans both rows in column 1.
Move the last sample item to column 4, then stretch it across both rows. Leave the four middle items at their default one-column, one-row size so they fill columns 2 and 3 across the two rows.
The completed structure contains six positions: two tall anchors on the outside and four equal cards in the middle.
5. The Feature Wall
The Feature Wall opens with a full-width statement, follows with four equal cards, and closes with a shorter three-column card. The unfilled final cell gives the bottom row an intentional stopping point.
On a landing page, the top band can hold a headline, the middle row can present features or benefits, and the bottom card can carry a closing note or call to action. A case study could use the same positions for a headline result, supporting metrics, and a concise summary.
Add a new Row. In the Grid Editor, set Columns to 4, Grid Items to 6, and Gap to 10px. Select the first sample item and drag its right anchor across all four columns to create the top band.
Leave items 2 through 5 at their default one-column, one-row size so they fill the second row.
Move item 6 to column 1 in the third row, then stretch it across columns 1 through 3. Stop before column 4 to preserve the open final cell.
The top and middle rows establish an edge-to-edge rhythm, so the shorter bottom row reads as a deliberate variation. The slight asymmetry gives the layout a clear finish.
The fourth cell can also hold a small testimonial, supporting statistic, or Button Module. Add another child item if the content benefits from filling that position.
Make Each Grid Responsive
The desktop structures above should be adjusted for tablet and phone breakpoints. A four-column Grid that works on a large screen may feel compressed when the same track count and spans are carried onto a narrow viewport.
Use Divi’s responsive controls to reduce the number of columns, change item spans or starting positions, and tighten gaps at smaller breakpoints. A practical starting point is four columns on desktop, two on tablet, and one on phone, but the content should determine the final structure. Preview every breakpoint and confirm that the reading order still makes sense when decorative empty cells are removed or the layout is simplified.
Styling Your Grid Layouts In Divi 5
Once the structure is set, use styling to reinforce its hierarchy. A dominant card might use a stronger fill, larger type, or both. In an evenly weighted layout such as the Pinboard, variations in image crop, type size, or font weight can create rhythm without making one item feel disproportionately important.
Divi 5’s Design Variables make those choices easier to maintain. A Design Variable is a reusable color, font, number, image, text string, or URL that can be referenced in compatible fields throughout a site.
Card colors, typography, spacing, gaps, and other supported values can reference variables instead of repeating static values. When you update a variable, every field that uses it updates as well.
Create and manage these values in the Variable Manager in the Visual Builder.
For color systems, the Variable Generator can create a palette of related color variables from primary and secondary colors. Because those generated colors retain their relationships, changing a base color can update its related shades across the design.
Build Your Grids Visually In Divi 5
These five examples, built in Divi 5, use the same small set of actions: define tracks, resize items, reposition them, preserve intentional gaps, and target repeating positions when the content may grow. The visual result changes because the placement strategy changes.
Start with the layout that best matches your content, then adjust its proportions, responsive behavior, and styling in the Grid Editor. Once the structure works, save it as part of your design system and reuse the pattern wherever it supports the story you want the page to tell.
The post 5 Creative CSS Grid Editor Layouts & How To Create Them In Divi 5 appeared first on Elegant Themes Blog.