How to create nested grids in Divi 5

Divi 5 offers Flexbox, Nested Rows and CSS Grid which, when combined, assemble a stunning building that is still responsive at all times. You’ll create a guard grid on your number one building, then assemble smaller grids within its columns to organize content material topics with exact control.

In this post we’ll show you how to create nested grids using the new choices. We’ll recreate the design step by step and show you how to shape each degree of the grid one after the other, making sure everything stays clean, flexible, and easy to change. Let’s proceed!

Step by step tutorial on rising nested grids

Before starting, let’s give a practical guide for a rough control of the grid layout that we will recreate:

This layout uses 1 number one grid to hold two sections of the content material topic. Each section hosts its own smaller private grid for photos, text, and social icons. The security grid monitors the entire building, while the internal grids keep all personnel fully aligned regarding contents. Each section remains balanced on desktop and adapts naturally to mobile, even though each section uses a defined layout structure.

To achieve this we will use a mix of CSS grid, nested rows and Flexbox. If you want to be further educated on how each of these layout methods works, those guides cover the whole thing in detail.

1. Set up your number one grid creation

Start with a brand new section and insert a Row of masonry grate.

Set the lines Length TO 90% AND Maximum width TO Nobody.

Go to Design > Arrangement and set Horizontal cable AND Vertical cable TO 20px. This helps keep the blank row consistent across columns.

The security grille serves as your main layout frame, so keep its spacing clean and true in front of anything inside.

2. Nest grids for the subject-related sections of the content material

Nest a 2-column Flex row within the left column and a 4-column grid row on the right.

The left column will capture the image and description. The correct column may contain social links. Set the Horizontal AND Vertical gaps a 20px in each row (we will most likely alternate them later).

Repeat the same steps for the rows below. This gives you a number one row and four nested rows within the building.

Add 10px padding in all directions of the brace row to ensure design consistency.

3. Fill the grids with images, text and icons

Fill the main row with two columns nested on the left. Across the left column, add a Image form and upload your number one instructor {photograph}. Keep the image full width so it fills the column, then give it a small size Border Radius (10px) inside the Project card to fit the rounded card style.

In the precise column, add a Header module. Customize it, paste your determination, and set it to an H2 tag within the file Project form. Below, add to Text body copy form along with the temporary descriptive paragraph, then add a different one Image module.

Switch to the four-column grid nested in the precise guardian column. Add a Icon module in each column and only keep one group abreast of the module, so each icon is in its own non-public square..

Add 20px top and bottom padding on all icons so they sit in the center.

Edit the Background color (#C8A797), Icon color (#FFFFFF), and columns Border radius TO 10px to match the design.

Below the social icons, enter a Text module.

Add a Button form within the column below. Personalize it with Background color, Border Radius (10px)and padding 20% above and below, 35% left and correct.

Repeat the identical construction within the lower nested rows. This time, the nested grid on the left will capture 4 photos since you won’t need the social media icons again.

Throughout the column below the images, add a Text module. For the rest apply the same construction.

4. Practice with different types for each level of the grid

With the content material topic in place, clean up the layout. Start with using the guardian row styling. Swap the background color to white to separate the layout from the Internet web page background.

Pay attention to how we added 10px padding on each side? Now manages the padding of the entire building, preserving the clean layout without touching individual specific columns.

Switch to the nested 4-column grid at the top right. This row contains the social icons, so the size of the columns can also be adjusted based on the available space. Set this line to Grill and change the Horizontal AND Vertical gaps a 4% AND 8%. (Using % values ​​so that they scale relative to the size of the show.) Smaller spaces create tighter space within the crew without affecting the layout of the keeper.

Scroll to the second row 4 columns down. This row contains photos and you want to check them further freely on smaller screens. Keep this line as Flex with Layout wrapping qualified and practical 4% horizontal/10px vertical hollow. With wrapping enabled, the grid can be naturally destroyed in a few lines on drugs and phones, preserving frivolously spaced photos without stretching.

Each row has corresponding spacing, then again each behaves differently: the best row remains fitted and linear, while the bottom row fits into the available space.

5. Superb elements for responsive size

The layout is already responsive because each grid controls its own non-public building.

Edit some issues and preview each mode to see if anything seems amiss. Take a look at the size of the text inside the nested two-column rows. Reduce the header size equally on your phone and keep the body text width set when you’re done. Avoid resizing the padding or margins and let the previously inserted blank spaces complete the design.

With those small changes, the layout flows naturally across all devices, and the nested building keeps each block of content and topics balanced without rebuilding anything for the cellular network.

Design complicated layouts with Divi 5’s flexible grid device

Nested layouts required padding strategies, row copying, and reliable fixes for the cellular network. Divi 5 gives you the flexibility of Flexbox, Grid and Nested Rows to build complicated buildings that stay organized on their own. The guardian row handles the entire layout, while each internal grid follows its own non-public spacing rules, making the design flexible without additional CSS.

While you finish a layout like this, set it aside in your Divi Library. You’ll reuse it as a template for pricing sections, worker team blocks, playing card participation path, and product choices without having to rebuild the development. Nested grids will let you design once and reuse everywhere, no more vital layout headaches.

The post How to create nested grids in Divi 5 appeared first on the Chic Topics blog.

wordpress Web Design

[ continue ]

wordpress Maintenance Plans | wordpress hosting

Read more