Skip to main content
All CollectionsTroubleshooting and FAQsFrequently Asked QuestionsGeneral
How to Add More Columns to Your Divi Builder Posts or Pages Layouts
How to Add More Columns to Your Divi Builder Posts or Pages Layouts

Learn how to customize the column structure, adjust settings for different screen sizes, and build responsive designs.

Updated over a week ago

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

  1. Inside a Regular Section, click on the Add Row icon to insert a new Row

  2. Choose the number of columns to be 1

  3. 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.

  4. Add 8 Blurb modules to the Row

  5. Edit the Row settings

  6. Go to Design Tab → Sizing

  7. Enable the Use Custom Gutter Width option and set its value to 1

  8. (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.

  9. Go to the Content Tab and click on the Gear icon for the Column

  10. Go to Advanced Tab Custom CSS Free Form CSS

  11. 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

  1. Edit the Column settings

  2. Go to Advanced Tab Custom CSS Free Form CSS

  3. 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.

Did this answer your question?