Skip to main content
How to Customize the Width of Divi Columns

Learn how to customize the width of Divi columns to create flexible and visually appealing layouts that enhance your website’s design.

Updated over a week ago

Customizing the width of columns in Divi allows you to create flexible and unique layouts that better suit your design needs and content presentation.

Adjusting column widths can enhance your pages' visual appeal and functionality, making your website more engaging and user-friendly.

This article will guide you through the steps to customize the width of Divi columns, enabling you to achieve a tailored and professional look for your site.

Notes:

  1. Out of the box, the space between columns is set to be 3, which is 5.5%. The Gutter's values can be:

    • 1 - no space in between columns

    • 2 - each column will have a space in between of 3%

    • 3 (default value) - each column will have a space in between of 5.5%

    • 4 - each column will have a space in between of 8%

  2. When customizing the size of each column, you need to consider the value of space each column will have. This requires some math, and it can be done with the following formula: (Row's Width - (Number of columns - 1 * Gutter width)) / Number of columns - This formula only applies if each column should have the same custom width.

    • The row's width will always be 100%

    • The number of columns is the total number of columns you want to have

    • The Gutter Width is the space value you want to have in between each column

Example: The first column is 70%, and the second column is 30%, with a 2% space in between

  1. Add a Row and set its layout to be 2 equal columns

  2. Edit the Row settings and go to the Design Tab → Sizing and enable the Use Custom Gutter Width

  3. Set its value to 1 (no space in between columns)

  4. Go to the Content Tab and open the settings for the first column

  5. Go to the Advanced Tab → Custom CSS → Module Elements → Main element

  6. Add these CSS properties:

    width: 68%!important;
    margin-right: 2%!important;

  7. Open the settings for the second column

  8. Go to the Advanced Tab → Custom CSS → Module Elements → Main element

  9. Add this CSS property:

    width: 30%!important;

The result can be seen below:

First column is 70%, and the second column is 30%, with a 2% space in between

Example: The first column is 40%, the second and third column is 30%, with a 2% space in between

  1. Add a Row and set its layout to be 3 equal columns

  2. Edit the Row settings and go to the Design Tab → Sizing and enable the Use Custom Gutter Width

  3. Set its value to 1 (no space in between columns)

  4. Go to the Content Tab and open the settings for the first column

  5. Go to the Advanced Tab → Custom CSS → Module Elements → Main element

  6. Add these CSS properties:

    width: 38%!important;
    margin-right: 2%!important;

  7. Open the settings for the second column

  8. Go to the Advanced Tab → Custom CSS → Module Elements → Main element

  9. Add these CSS properties:

    width: 29%!important;
    margin-right: 2%!important;

  10. Open the settings for the third column

  11. Go to the Advanced Tab → Custom CSS → Module Elements → Main element

  12. Add this CSS property:

    width: 29%!important;

The result can be seen below:

First column is 40%, the second and third column is 30%, with a 2% space in between

Example: The first column is 50%, the second, third, and fourth column is 16.66%, with a 2% space in between

  1. Add a Row and set its layout to be 4 equal columns

  2. Edit the Row settings and go to the Design Tab → Sizing and enable the Use Custom Gutter Width

  3. Set its value to 1 (no space in between columns)

  4. Go to the Content Tab and open the settings for the first column

  5. Go to the Advanced Tab → Custom CSS → Module Elements → Main element

  6. Add these CSS properties:

    width: 48%!important;
    margin-right: 2%!important;

  7. Open the settings for the second column

  8. Go to the Advanced Tab → Custom CSS → Module Elements → Main element

  9. Add these CSS properties:

    width: 15.33%!important;
    margin-right: 2%!important;

  10. Open the settings for the third column

  11. Go to the Advanced Tab → Custom CSS → Module Elements → Main element

  12. Add these CSS properties:

    width: 15.33%!important;
    margin-right: 2%!important;

  13. Open the settings for the third column

  14. Go to the Advanced Tab → Custom CSS → Module Elements → Main element

  15. Add this CSS property:

    width: 15.33%!important;

The result can be seen below:

The first column is 50%, the second, third, and fourth column is 16.66%, with a 2% space in between

Pro tips:

  1. The above example shows that the width value is not exactly fixed. If you need a column to be 50% but you also want to have a space, the space value has to be subtracted from the actual width value.

  2. If you don't want to have any space in between your columns, you can set the widths, including the space value

    • Example 1: The width of the first column will be 70%, and the width of the second column will be 30%

    • Example 2: The width of the first column will be 40%, and the width of the second and third columns will be 30%.

    • Example 3: The width of the first column will be 50%, and the width of the second, third, and fourth columns will be 16.66%.

Did this answer your question?