In this post, we’ll show you how to create nested grids using these new features. We’ll recreate the design step by step and show you how to style each grid level individually, keeping everything clean, flexible, and easy to update. Let’s get started!
Step-by-step tutorial on how to create nested grids
Before we start, let’s take a quick look at the grid layout we’ll be recreating:
This layout uses one main grid for two pieces of content. Each section contains its own smaller grid for images, text, and social icons. The parent grid determines the overall structure, while the inner grids keep each content group perfectly aligned. Both sections remain balanced on desktop and flow naturally to mobile, even though each section uses a different layout pattern.
We’ll use a combination of CSS grid, nested rows, and Flexbox to build this. If you’d like to learn more about how each of these layout methods work, these guides cover everything in detail.
1. Set up your main grid structure
Start a new section and insert one Masonry grid row.
Set the queue Width Unpleasant 90% And Maximum width Unpleasant no.
Go to Design > Layout and set Horizontal opening And Vertical opening Unpleasant 20px. This keeps the row spacing consistent between columns.
The parent grid acts as the main layout frame, so keep the spacing clean and consistent before adding anything to it.
2. Nest grids for content sections
Nest a 2-column Flex row on the left column and a 4-column Grid row on the right.
The left column contains the image and description. The right column contains social links. Set the Horizontal And Vertical gaps 20px in both rows (we can change them later).
Repeat the same steps for the rows below. This gives you one main row and four nested rows within the structure.
Add 10px padding in all directions of the parent row to maintain design consistency.
3. Fill grids with images, text and icons
Fill the first nested row with two columns on the left. Add one in the left column Image module and upload your head coach photo. Keep the image full width so it fills the column, then give it a small width Border radius (10px) in the Design tab to match the rounded card style.
In the right column add one Category module. Customize it, paste your title and set it to an H2 tag in the Design tab. Add one below that Text body text module with your short description paragraph and then add another Image module.
Go to the nested grid with four columns in the right parent column. Add one Icon module in each column and keep only one network per module so that each icon is in its own square.
Add 20px padding at the top and bottom of all icons so they are centered.
Adjust the Background color (#C8A797), Icon colour (#FFFFFF), and columns Boundary radius Unpleasant 10px matching the design.
Below the social icons, insert a Text module.
Add one Knob module in the column below. Customize it with Background color, Border radius (10px)and padding 20% top and bottom, 35% left and right.
Repeat the same pattern in the bottom nested rows. This time, the left nested grid contains four images, because you no longer need social media icons.
In the column below the images, add one Text module. Follow the same structure for the rest.
4. Apply different styles to each grid level
Now that the content is in place, clean up the layout. Start styling the top row. Change the background color to white to separate the layout from the page background.
Remember how we added 10px padding on all sides? That now controls the outdoor space for the entire structure, keeping the layout clean without touching individual columns.
At the top right, go to the nested grid with 4 columns. This row contains the social icons, so the column sizes can be adjusted based on available space. Set this row to Rooster and adjust the Horizontal And Vertical gaps 4% And 8%. (Use % values so they adapt to screen sizes.) These smaller gaps allow for a smaller space within the group without affecting the parent layout.
Scroll to the second row with four columns at the bottom. This row contains images and should be more freely resizable on smaller screens. Keep this row as Bow of Layout packaging enabled and applied 4% horizontal / 10px vertical spacing. With wrapping enabled, the grid can be naturally divided into multiple rows on tablets and phones, keeping images evenly spaced without stretching.
Both rows have the same spacing, but each behave differently: the top row remains fixed and linear, while the bottom row adapts to the available space.
5. Align elements to responsive formats
The layout is already responsive because each grid manages its own structure.
Adjust a few things and preview each mode to see if anything is off. Check the text sizes in the nested two-column rows. Reduce the header size slightly on the phone and keep the body text width set to full. Avoid resizing the padding or margins and let the gaps you set earlier do the work.
With these minor adjustments, the layout flows naturally across devices, and the nested structure keeps each content block balanced without rebuilding anything for mobile.
Design complex layouts with Divi 5’s flexible grid system
Nested layouts used to require padding tricks, duplicate rows, and constant solutions for mobile. Divi 5 gives you the flexibility of Flexbox, Grid and Nested Rows to build complex structures that stay organized on their own. The parent row takes care of the overall layout, while each inner grid follows its own spacing rules, making the design flexible without additional CSS.
Once you have completed such a layout, save it to your Divi library. You can reuse it as a template for pricing sections, team blocks, course cards, and product features without having to rebuild the structure. Nested grids let you design once and reuse anywhere without worrying about layout.
#Create #Nested #Grids #Divi