Create more columns rows (5+) in Divi

If you’ve played around with Divi, then you’ll realize there’s a default limitation to 4 columns that you can add per row. I am here today to show you how you can get around this with some CSS.

  1. Create a new row, with 1 column layout.
  2. Add a Divi Module of one of the following: Text or Blurb Module
  3. Inside the Advanced tab, then in the custom CSS area, inside the Main Element text block, add the following code:

4. Repeat step 3 until you have 5 Modules in total.

5. You will need to adjust the “width: 200px” to different numbers to see what fits best for your columns. But a good general rule of thumb is that you should divide the total width of your site by the number of columns you want, so that it equals. E.g.: 1200px width site, with 5 columns = 1200 / 5 = 240px. You should replace the width with: “width: 240px”.

If you need help with figuring out what your Divi website width is or how to adjust it, check out our post about Figuring Out The Width Of Your Divi Website.

You may also like

Leave a Reply

Your email address will not be published. Required fields are marked *