How to make a Divi portfolio grid 3 columns instead of the default 4 columns.
To add a portfolio module to your page, add a row where you would like the portfolio to go. If you are uncertain about how to add a row or what a row looks like we have a tutorial for you on Sections, Columns and Rows.
Once you have the Row a grey button with a plus on it will pop up. A Module box will appear and you can look for the Portfolio module within the list of modules and click it to add it to your row. You can also type the word “portfolio” in the search field to find and add the portfolio module.
When the module is added, you will see the module’s list of options. These options are separated into three groups: Content, Design and Advanced.
The steps explained
You can add CSS to the install to change the default settings from 4 columns to 3 columns in the Divi Portfolio module. There is a great tutorial on it here.
Add the following class to the module advanced CSS settings… three-column-grid
Then add the following code to the CSS area of Divi.
Code to include to create Divi portfolio grid 3 columns
/* 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;
}
}