Sometimes you need more than the four columns that Divi provides. Here is a simple method to display a group of objects into more than one column.

Add all of the modules (in this case buttons) to a row with a single column. Here is what it will look like in the Divi Builder.

Open the row’s settings and click on the Advanced Tab. Scroll down to the ColumnMain Element’s CSS box and insert the following CSS.

display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: space-evenly;
-ms-flex-pack: space-evenly;
justify-content: space-evenly;

Here are the results:

Summary

Even though it looks like a lot of code, there are only three commands here (and a bunch of vendor-prefix repetitions).

  • display: flex;
  • flex-wrap: wrap;
  • justify-content: space-evenly;

You may want to use one of the other justify-content settings.

That’s all there is.

Join our email list

Join our email list

Join our mailing list to receive the latest tech tips from our team.

You have Successfully Subscribed!

Pin It on Pinterest

Share This