One of our most common requests at DiviPlugins is how to change the portfolio layout from four columns to three. You can easily do this by applying a new class to the module and adding a little CSS to your child theme or the Custom CSS section in the Divi Options panel.

Change the portfolio grid columns in your Divi child theme

In our example, we add the following class three-column-grid to our module. Then in our child theme’s stylesheet, we added the following CSS:

That’s it! Notice we are only changing the layout to three columns when the browser window is at least 767px. This is because Divi’s default CSS will take over from 767px on down and change the grid to two columns and then down to one column on mobile.

And here’s the resulting three column layout:

* Divi 3.13 introduced a bug in the grid that broke the arrangement of grid items if the browser window size was between 480px and 767px. If the CSS above does not work on those screen sizes, make sure you update to Divi 3.17 which fixed this issue.

Pin It on Pinterest

Share This