Creating a well-structured and visually appealing layout is essential for engaging website visitors. This article is for you if you're looking to add more columns to your Divi Builder posts or pages.
This article will guide you through the process of expanding your layout options by adding additional columns to your Divi Builder designs.
Whether you need to display content in a multi-column grid, enhance your page's organization, or create complex layouts, our step-by-step instructions will help you achieve your goals.
Note: The maximum number of columns a Row can have out of the box is six. This also depends on the type of section you are using: Regular Section or Specialty section.
Using CSS Grid to create a custom 8 columns layout
Inside a Regular Section, click on the Add Row icon
to insert a new RowChoose the number of columns to be 1
Add the module to the Row. The number of modules added will be the final number of custom columns. For example, if you want your modules to be displayed in an 8-column layout, add 8 modules. Moving forward, we are going to use the 8 Blurb modules.
Add 8 Blurb modules to the Row
Edit the Row settings
Go to Design Tab → Sizing
Enable the Use Custom Gutter Width option and set its value to 1
(Optional) Go to the Desing Tab → Spacing → Padding, and for the Top and Bottom padding, type in 0. This will remove the row's default top and bottom spacing.
Go to the Content Tab and click on the Gear icon for the Column
Go to Advanced Tab → Custom CSS → Free Form CSS
Add the following CSS Code:
selector {
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 20px;
}
Note: The above CSS code uses CSS Grid; because of that, the syntax checker will flag some rules that are not supported. You can safely ignore those warnings.
Make the custom 8 columns layout responsive
For the responsive layout, we are going to use:
4 Column for Tablets
2 Columns for Phones
Edit the Column settings
Go to Advanced Tab → Custom CSS → Free Form CSS
Below the existing code (from previous steps), add this new code:
@media (max-width: 980px) {
selector {
grid-template-columns: repeat(4, 1fr);
}
}
@media (max-width: 767px) {
selector {
grid-template-columns: repeat(2, 1fr);
}
}
The new CSS Code will change the Gird columns from 8 columns (for Desktop) to 4 Columns (for Tablets) and 2 Columns (for Phones).
The final result can be seen in the GIF below:
Pro Tips:
You can use any module. The only rule is that each module should be added to the same Row.
The rule that defines the number of columns is grid-template-columns: repeat(8, 1fr);
Change the number 8 in the above rule to change the number of columns
The gap: 20px; rule, define the space between each column on the vertical and horizontal axis.