One of our most common requests at DiviPlugins is how to change the number of columns in the portfolio grid. In most cases, the request is how to change the number of columns from four to three, for which we created this tutorial. But from time to time, we do get the more rare request for changing the columns from four to five. If you’re looking for that tutorial, you’re in the right place.
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 five-column-grid to our module. Then in our child theme’s stylesheet, we added the following CSS:
/* FIVE COLUMN PORTFOLIO GRID LAYOUT */
@media only screen and ( min-width: 981px ) {
.five-column-grid .et_pb_grid_item {
width: 17.6% !important;
margin: 0 3% 3% 0 !important;
}
.five-column-grid .et_pb_grid_item:nth-child(3n+1) {
clear: unset !important;
}
.five-column-grid .et_pb_grid_item:nth-child(4n+1) {
clear: unset !important;
}
.five-column-grid .et_pb_grid_item:nth-child(5n) {
margin-right: 0 !important;
}
.five-column-grid .et_pb_grid_item:nth-child(5n+1) {
clear: left !important;
}
}
That’s it! Notice we are only changing the layout to five columns when the browser window is at least 981px. This is because Divi’s default CSS will take over and change the grid to three columns at 980px, two columns at 767px and one column on mobile (479px).
If you prefer to keep the five columns on smaller devices, simply change the min-width: 981px value above to a lower value 1 pixel higher than the thresholds. For larger tablets that would be 768px. For smaller tablets that would be 480px.
And here’s the resulting five column layout:
