Create 7/8/9/10 columns rows in Divi

Divi Rows are added inside Divi Sections and can be divided into columns that hold Divi modules. By default, you can only add between 1 and 6 columns into any given row.

Add 7/8/9/10 columns into a Divi row

If you want to add more than the default 6 columns into a single row in Divi then you will need to use some custom CSS and edit the sizing options within the rows modules. All modules will actually be stacked on top of each other within a 1 column row and our CSS code will align them into a single line. Module sizing settings will then be used to assign the right amount of space for each module so that each can fit into the horizontal space without getting pushed onto the next row.

In the example below, we are going to simulate 7 columns per row to display 7 logos within 7 image modules.

1. Add a new row with 1 column
2. Add a Divi image module
3. In the image modules Advanced tab under Custom CSS for Main Element, add the following CSS code;

    display:inline-block; 

4. In the Image module Design tab settings go to the Sizing section and set the Width to 14.25%
5. Duplicate the Image module 6 times so we have 7 in total

How to change the sizing for tablet & mobile

The example above will keep all 7 images on a single row even when the screen size is reduced for tablets and mobiles. This will mean that each of the images is scaled down to fit and may result in the images becoming too small to see. 

To make the images remain at a legible size on tablets and mobile devices you can edit the sizing option within the image modules so that the images spread out over 2 rows on tablet and mobile.

To do this you can change the Image module width for each image to 25% which means that only 4 can fit into the 100% width of the element. The rest will be pushed down to the next row so we have 4 on 1 row and 3 on the next. If you wanted to show 3 images per line then you would set it to 33% and 50% for 2 images.

1. In any of your image module Design tab settings go to the Sizing section and on the Width option click on the devices icon to reveal the tablet and mobile tabs. Click on the Tablet tab and change the setting to 25%
2. Right-click on the Size title and choose the Extend Width. Choose to extend Width to all Images throughout This Row.

Add 8, 9, 10 or more columns to Divi rows

The example above is for adding 7 columns to your Divi row, but the process would be the same to add 8, 9 or 10 columns to the row. You would just need to edit the Size settings for your image modules to be 100% divided by the number of modules you want in the row as follows;

• 8 columns = 12.5%
• 9 columns = 11.15%
• 10 columns = 10%