Limited Time Offer - Save 10%

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.

* This tutorial will work for the default portfolio modules that come with Divi and our Portfolio Posts Pro plugin modules. Our latest plugin, Divi FilterGrid, makes it even easier to change the columns. We’ve added an option directly in the module settings for this plugin that allows you to define the number of columns for each screen size.

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:


@media only screen and ( min-width: 768px ) {

.three-column-grid .et_pb_grid_item {
width: 28.333% !important;
margin: 0 7.5% 7.5% 0 !important;
.three-column-grid .et_pb_grid_item:nth-child(3n) {
margin-right: 0 !important;

.three-column-grid .et_pb_grid_item:nth-child(3n+1) {
clear: left;

.three-column-grid .et_pb_grid_item:nth-child(4n+1) {
clear: unset !important;


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:

Pin It on Pinterest

Share This