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:
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%
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
Add a Row and set its layout to be 2 equal columns
Edit the Row settings and go to the Design Tab → Sizing and enable the Use Custom Gutter Width
Set its value to 1 (no space in between columns)
Go to the Content Tab and open the settings for the first column
Go to the Advanced Tab → Custom CSS → Module Elements → Main element
Add these CSS properties:
width: 68%!important;
margin-right: 2%!important;Open the settings for the second column
Go to the Advanced Tab → Custom CSS → Module Elements → Main element
Add this CSS property:
width: 30%!important;
The result can be seen below:
Example: The first column is 40%, the second and third column is 30%, with a 2% space in between
Add a Row and set its layout to be 3 equal columns
Edit the Row settings and go to the Design Tab → Sizing and enable the Use Custom Gutter Width
Set its value to 1 (no space in between columns)
Go to the Content Tab and open the settings for the first column
Go to the Advanced Tab → Custom CSS → Module Elements → Main element
Add these CSS properties:
width: 38%!important;
margin-right: 2%!important;Open the settings for the second column
Go to the Advanced Tab → Custom CSS → Module Elements → Main element
Add these CSS properties:
width: 29%!important;
margin-right: 2%!important;Open the settings for the third column
Go to the Advanced Tab → Custom CSS → Module Elements → Main element
Add this CSS property:
width: 29%!important;
The result can be seen below:
Example: The first column is 50%, the second, third, and fourth column is 16.66%, with a 2% space in between
Add a Row and set its layout to be 4 equal columns
Edit the Row settings and go to the Design Tab → Sizing and enable the Use Custom Gutter Width
Set its value to 1 (no space in between columns)
Go to the Content Tab and open the settings for the first column
Go to the Advanced Tab → Custom CSS → Module Elements → Main element
Add these CSS properties:
width: 48%!important;
margin-right: 2%!important;Open the settings for the second column
Go to the Advanced Tab → Custom CSS → Module Elements → Main element
Add these CSS properties:
width: 15.33%!important;
margin-right: 2%!important;Open the settings for the third column
Go to the Advanced Tab → Custom CSS → Module Elements → Main element
Add these CSS properties:
width: 15.33%!important;
margin-right: 2%!important;Open the settings for the third column
Go to the Advanced Tab → Custom CSS → Module Elements → Main element
Add this CSS property:
width: 15.33%!important;
The result can be seen below:
Pro tips:
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.
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%.