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:

/* THREE COLUMN PORTFOLIO GRID LAYOUT */

@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:

The CSS above was created with the default value of 12 posts displayed in the grid at one time. If you are displaying a large number of posts per page, you may run into a few conflicts. This seems to be a moving target with different versions of Divi and conflicts with 3rd party plugins. I would suggest testing the layout at these two breakpoints: 981px or greater and 768px – 980px. Anything under 768px is controlled by the CSS included in the Divi theme and is not affected by the CSS above.

If you see an issue at either of the two breakpoints, it’s usually caused by a single post that applies to both the 3n+1 and 4n+1 rule. You can override a single item like this:

@media only screen and ( min-width: 768px ) and ( max-width: 980px ) {
.three-column-grid .et_pb_grid_item:nth-child(61) {
clear: left !important;
}
}

This should override the clear value for the 61st post in the grid but only when the screen size is between 768px and 980px. You’ll just need to change the 61 value to match the post number you’re having issues with.

Pin It on Pinterest

Share This