Divi’s new Grid Layout System opens up endless possibilities for creating intelligent layouts. However, this is new territory for many, and it can be confusing as you focus on some of these new input options. Therefore, we will look at how to build a grid layout using the new controls in Divi 5.
Not long ago we released a pack of eight ready-made grid layouts. Using Grid #4 from that package as design inspiration, we will rebuild it step by step.
If this is your first foray into CSS Grid, this tutorial is a good place to start, as we won’t be using Offset rules to make this possible.
How to create a grid layout
The goal is to leave this tutorial with this as the end result.
Step 1. Set up the grid
The first step is to determine the basic structure needed to create this grid. We have to ask ourselves: “Which containers do we need?” Assuming we build the grid layout on the Row container and use Columns as grid items, we can determine that we need five columns.
This indicates what we need to add to the page. Add a new section, scroll down to the grid options and choose the 5×2 multi-row grid option.
This gives us five columns (plus another five). Remove the extra five columns.
Now you should have one row set to a grid layout and five columns ready to build.
Step 2. Configure the layout of the parent row
CSS Grid has two main levels of settings: settings applied to the parent container and settings applied to its children. The first thing we need to do is set the parent container so that when we apply the child item’s grid settings, they make sense.
We start by setting the horizontal and vertical openings. You’ll need to use design variables and clamp() values here, but to make this tutorial simple, we’ll set them to 20px each.
Next we need to show more Divi’s Grid settings. To do that, scroll down to the dropdowns for “Column widths“And”Ride heights.”
Change the Column Widths option from ‘Equal Width Columns’ to ‘Manual width columns.” Similarly, change “Row heights” from “Auto height rows” to “Manual height rows.” This allows us to enter specific width and height values in which the grid should fit the underlying items.
Setting these options to ‘Manual’ will give us two additional options each, allowing us to set custom values. We can now enter these values:
- Place “3fr 3fr 2fr” in the Grid column template to create two wide columns and one narrow column.
- Place “3fr 2fr 2fr” in the Grid row template to make the first row larger than the others.
You can see the outline starting to take shape even though there is no substance or style.
Step 3. Column Grid Settings
At this point we have the global layout settings, but we now need to set individual grid options at the child element level. Remember that we have five columns, each with different settings.
Column 1
Column 1 is simple. We leave all the default grid size settings unchanged so that column 1 is naturally in the first cell of the grid.
Column 2
Click in column 1 and go to the Design tab > Dimensions. Set the column start to 2, the row range to 2, and the row start to 1.
This creates a high column in the middle that extends over the two rows.
Column 3
Luckily for you, Column 3 is also simple and requires no changes to the default settings. This moves the column to the next available space in the top row.
Column 4
Click in column 4 and open Design > Dimensions. Set driving range to 2.
This column extends downwards and spans two rows vertically.
Column 5
Click in column 5 and open Design > Dimensions. Set Column Range to 2, Column Start to 2, Row Range to 2 and Row Start to 2.
This creates a large block that fills the bottom right corner of the grid, causing some overlap with column 2.
Step 4. Design each column
As far as the grid layout goes, you’re essentially 80% done. If you want to create your own design from here, you can build something unique while keeping the same grid structure. But let’s go ahead and paint with broad strokes. Let’s add some color and images to these columns. You can access the images by importing the layouts referenced at the beginning of this article (remember we’re using grid #4).
All columns in this example have a background color or image.
The grille is a little wrinkled. To fix that, we need to add some modules to the columns. In column 1, add a header module and a button module. Go to the column itself and on the Design tab, find the Spacing options and add internal padding using my (40px, 10%) for all four sides.
Column 2 is similar in that it is given a padding of minus (40px, 10%) on all sides. It also gets an image, headline and text module. But then go to the Design Settings of the > column Layout. Find the “Justify content‘ icon options and choose the third, ‘End.” This will push the modules to the bottom of the column.
Then, still in column 2, go to the Advanced > tab Position. Add one z index of 10 to lift it above the overlapping column 5.
We can also introduce a border radius to all our columns. Add in column 2 20px border radius to all corners, then use Expand Attributes to give all columns in the parent row the same border radius. Once that’s done, set the bottom right border radius to 10vw.
To create the curved spacing effect at the bottom right of column 2, we add a box shadow. Usage Box shadow #4Spread length of 20px (set all other values to zero), Shadow color of white (#ffffff at 100%) and Box Shadow Position from “Outer shade.”
Column 4 adds the Divi 5 “5” image (for reference, it is set to 80% width.
All we have to do now is give the grid some more breathing room. To do that, go to the parent row and go to Design > Dimensions. Give the row a width of 100% with a maximum width of no.
And there we have it: a fairly complex grid with two columns, several of which cover additional length (vertical or horizontal). We have an interesting use of a box shadow to create the appearance of an opening, when in reality it is two grid items overlapping each other.
Download 8 CSS Grid Sections for Divi 5
Get 8 grid sections for free. These are pre-styled sections designed to look great straight away. Import them into your Divi library and add them to any page. The one we used in this tutorial is #4.
Build your grid layouts in Divi 5 today
You’ve just rebuilt a complex grid from scratch. Now that you understand how Divi 5’s Grid input works, you can start experimenting with your own layouts: switching sequences, adjusting gaps, and stacking content in new ways. The more you practice, the more you will see how flexible and fast this system can be compared to the old block model.
Now that you’ve built this basic layout, why not take it one step further?
- Try different values: What happens if you change the grid column template to 1fr 4fr 1fr?
- Rearrange the spans: Can you make column 4 span horizontally instead of vertically?
- Discover responsive settings: Use Divi’s responsive controls to completely change the grid structure on tablets and mobile devices for an optimized experience.
- Try using offsets: We haven’t discussed grid shifts, but they are a useful way to rearrange your grid to account for asymmetrical layouts.
The layout we built today is just one of countless possibilities. Use these new skills as a springboard for your creativity. We can’t wait to see what you build with it!
Not yet on Divi 5? Make the switch today and start building smarter, faster layouts.
#Create #Grid #Layout #Divi #Step #Step