Four Column Full Width Blog Grid in Divi
I was reading a blog post from Divi Guru Geno Quiroz about how to create a four column portfolio grid in Divi. It’s a great article and the idea came to me – can it be replicated in a full width blog grid? In my previous tip TIP # 10: FULL WIDTH BLOG GRID IN DIVI, I have shown you how to make a standard three column blog grid full width.
Resource:
You need Divi or Extra
Procedure:
Create a blog grid in a standard row. Select the particular category, post from which you want to be displayed. Make sure that all the posts in that particular category must contain featured image. The saved page will look like Image 1.
Open Section Settings and make the following changes:
Custom Padding: Top 0px, Bottom 0px
Open Row Settings and make the following changes:
Make This Row Fullwidth: YES
Use Custom Gutter Width: YES
Gutter Width: 1
Custom Padding: Top 0px, Bottom 0px
Save the page and you will have a nice looking fullwidth three column blog page. Add the following CSS to make it four columns:
@media only screen and ( min-width: 981px ) {
.et_pb_column_4_4 .et_pb_blog_grid[data-columns]::before {
content: '4 .column.size-1of4' !important;
}
.et_pb_column_4_4 .column.size-1of4 {
width: 25%;
}
.et_pb_post {
margin-bottom: 0;
}
}
Now the look of the blog page will be of four columns.
