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.
- Add a new row with 1 column
- Add a Divi image module
- In the image modules Advanced tab under Custom CSS for Main Element, add the following CSS code;
display:inline-block;
- In the Image module Design tab settings go to the Sizing section and set the Width to 14.25%
- 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.
- 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%
- 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%



























Such simple clean code! seen far too many people attempt plugins etc for this when it can be done so simply like this. Top work.
i think extra columns and column flexibility is going to be popping up in a future Divi update… fingers crossed!
This didn’t age well.
Why?
Still waiting on that update… solid workaround
That`s a very useful trick but it will not help when you want to increase the number of product columns on a shop page being serviced by Woo Commerce – Any suggestions?
this maby https://docs.woocommerce.com/document/change-number-of-products-per-row/
I’m struggling to get the 5 columns I created with this method to center on the page.
http://www.sean-barton.co.uk/2016/06/divi-extended-column-layouts-6-column-layout/
Great post! you just saved my life! How can I arrange “the blurb set” to center? They are all float left on mobile view.
on mobile things would get tiny so i would just disable this on mobile and let the normal stacking on Divi take over
Taking Care of Mobile If you don’t want to keep your custom column layout the same on all devices, you can enter some additional css to scale the columns down to a more readable size on mobile devices. Feel free to change the percentages to fit your needs. @media (max-width: 980px){ .ten-columns .et_pb_module {width: 20%;} .nine-columns .et_pb_module {width: 33.3%;} .eight-columns .et_pb_module {width: 25%;} .seven-columns .et_pb_module {width: 25%;} .six-columns .et_pb_module {width: 33.3%;} .five-columns .et_pb_module {width: 33.3%;} } @media all and (max-width: 767px) { .ten-columns .et_pb_module {width: 100%;} .nine-columns .et_pb_module {width: 100%;} .eight-columns .et_pb_module {width: 100%;} .seven-columns .et_pb_module {width: 100%;} .six-columns .et_pb_module… Read more »
Why is the example only done with blurbs? Why not with other modules as well?
It works with images, text etc.
no reason, you can add whatever you like in. just an example…
Hey Connie,
Tak a look at my example below. It’s with columns and not just modules. Then you can add as many modules as you like in each column 🙂
Hey guys 🙂
I’ve been looking all over for a 5 col grid, but it’s always blurb next to each other.. I want to share my work with you.. A real 5 col grid in divi
https://youtu.be/6geuIrookzQ
Hi everyone… thanks for this post. I have done this and use the 5 column and 7 columns. My problem is on mobile I can’t get them to stack. Any thoughts? I am not an experienced coder.
Hi there… my apologies… I later noticed the solution was in fact provided in this thread! Thank you all
Hi
great and simple code.
I have tried to use it with person module.
I have added padding to add distance between.
How to center each module in mobile version?
thank you
hello Craig, I appreciated your post and I would like to apply to this page in which I am using buttons and not images. I would like to have 12 small buttons in a row. https://prnt.sc/s00h42 What I did has been adding the following code to the main element css and add a left padding of 200px to move the row more to the centre: display:inline-block; width: 50%!important; Now I don’t know how to proceed because if I duplicate the row it goes at the bottom of the first row. Not sure if a float: left; on the second row… Read more »
might be better to use an image hotspot for this? something like https://wordpress.org/plugins/devvn-image-hotspot/ might take some tweaking to get your buttons to align along the map otherwise and more so for them to stay on different screen sizes
Hi There……the extra columns – do they have be image? Is it possible to add Buttons? Building a page that is designed to have 7 buttons in one row.an
they can be anything
YO mate, did not function correctly for me… Rats, sensible code too. Likely user errors.
Hey, the images above are created using this method on the page so should work. maby have another try. good luck!
Hi, Craig! thanks for this solution. I have added a Blurb module, instead of Image, and I can display a total of 7 columns. however, the last column appears to have some padding at the top? or sits down, a bit, for some reason?
Hey Craig – I am having this same issue as Brian. Any idea what might help this? Clearfix possibly? I’m fiddling with it now.
Did you ever find a solution for this?
Thank you for the code. I want to use this code to create a chart/table with text but it didn’t work. Can you advise?
First of all thanks for the code, still worked perfectly for the 8 column row I needed with the blurb module to get 8 icons next to ach other! Sad to see though I had to read an eight year old article for that and ET still haven’t integrated a solution themselves for that. Lets hope with Divi 5 there comes a native solution to this.
i think Divi 5 at first will do very little for most people as it is rebuilding the bones of Divi, but once launched the rate of improvements will be fast and many!