R25: How to create a 2, 3 or 4 column square blog layout

Update: With Divi updates the columns section of this code no longer works correctly. You can still use the styling for your posts but to change the number of columns I highly recommend you move over to using CSS Grid. You can find a Recipe on how to do it here.

Recipe #25 answers a couple of questions I have been asked recently. How to change the blog grid layout to four columns (I’ve thrown in two columns as well), and how to make the featured image thumbnails square instead of rectangular.

There are a few ways to do this but personally I don’t like messing with PHP unless I have to, I will leave that to far smarter people than me. So this is a totally CSS solution with some cool little snippets you’ll also be able to use elsewhere.

Watch the video, get the code you need in the accompanying blog post, be sure to scroll to the bottom for your fabulous freebie, and let me know what you think in the comments!

So let’s get cooking!

Ingredients

The Divi Theme from Elegant Themes.

Some existing blog posts with featured images set.

Cooking time

This should take you around 10 minutes max.

Preparation

First let’s set up our section and blog module. On your page, add a new standard section with a single column. In the row settings, make it Fullwidth.

I am going to show you how to create a 2, 3 and 4 column layout but the actual module settings are the same for each version so let’s set that up, add a blog module and apply the following settings:

Layout: Grid
Posts Number: any multiple of the column layout you will be using
Include categories: Which ever ones you want to display
Show featured image: Yes
Read more button: Off
Show author: No
Show date: No
Show categories: No
Show comment count: No
Show pagination: That’s up to you
Featured image overlay: Off

Leave all the other settings alone.

Then Save & Exit

That’s our prep done.

Method

Next we will add some CSS which applies to all three versions of this layout, so whether you choose to create the 2, 3 or 4 column layout, you need to add the CSS from the toggle below into your child theme stylesheet, Divi options custom CSS box or the page specific CSS box.

Here is what we are doing with this CSS:

This first section sets the width of our image and uses the object-fit property to crop and scale our image so it keeps its aspect ratio when we make it square. Object-fit is not currently support in IE and Edge so if that bothers you or you don’t want square images, you can just leave this section out completely.

.ds-blog-square a img {
    width: 100%;
    object-fit: cover;
}

Next we are hiding the excerpt as this is the only thing we can’t hide in the module settings, and we are also fixing some margin and padding issues.

.ds-blog-square .post-content {
    display: none;
}

.ds-blog-square .et_pb_image_container {
    margin: -19px -19px 0;
}

.ds-blog-square h2 {
    margin: 0;
    padding: 0;
}

This section removes some more padding and the default border and positions the post relatively which will allow us to move the post title on top of the image.

.ds-blog-square .et_pb_post {
    position: relative;
    padding-bottom: 0;
    border: none;
}

And finally, the fun part. Here we are absolutely positioning the post title so it sits on top of the image, then we are giving it a background colour which is our overlay and making that the same size as our image. We are adding an outline and bringing it in from the edge a little to create a border and then using display: flex to center our post title both horizontally and vertically no matter how many words it is.

After that we are adding a little animation on hover to move the outline and change the colour of it, and the text.

I have styled this very simply using just black and white and a thin outline so it is easy for you to change it however you want.

.ds-blog-square h2 a {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    padding: 40px;
    margin: 0;
    background: rgba(0, 0, 0, .3);
    color: #fff;
    text-align: center;
    outline: 2px solid #fff;
    outline-offset: -20px;
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.ds-blog-square h2 a:hover {
    background: rgba(255, 255, 255, .5);
    color: #000;
    outline: 2px solid #000;
    outline-offset: 0;
}

To make all this CSS apply we need to add a custom class to our blog module, so open up the module settings, click on the Custom CSS tab and in the CSS Class field add a class of ds-blog-square then save & exit.

Now for the individual layout settings. 

Four Columns:

Open up the row settings, click on the custom CSS tab and give it a Column CSS class of ds-blog-four-column. Be sure to add this to the Column CSS Class field and NOT the CSS Class field. Then save & exit.

Next, add the CSS from the toggle below into your child theme stylesheet, Divi options custom CSS box or the page specific CSS box.

Here is what we are doing:

This section changes the layout from the default 3 columns to 4 columns on screen sizes over 980px wide. Below that screen size the layout will move to 2 columns on tablets and then 1 column on mobiles. We are also removing the margin after every 4th post so our layout has the same margin around every post.

@media only screen and ( min-width: 981px ) {
.et_pb_column_4_4 .et_pb_blog_grid .et_pb_salvattore_content[data-columns]::before { content: ‘4 .column.size-1of4’ !important;
}
.et_pb_column_4_4 .column.size-1of4 {
width:22.15% !important;
margin-right:1%;
}
.et_pb_column_4_4 .ds-blog-four-column.et_pb_blog_grid[data-columns]::before {
content: “4 .column.size-1of4”;
}
.ds-blog-four-column.et_pb_blog_grid .column.size-1of4 {
margin-right: 3.8%;
padding-bottom: 30%;
width: 22.15%;
}
.et_pb_blog_grid .column.size-1of4:last-child {
margin-right: 0;
}
}

Here we are setting the margin between each row of posts so it is relatively even and then also setting a default height for our post images to make them square rather than rectangular. If you are not using the object-fit property which is not supported in IE and Edge as previously mentioned, then you can leave the second part of this section out.

.ds-blog-four-column .et_pb_post {
    margin-bottom: 25%;
}

.ds-blog-four-column .ds-blog-square a img {
    height: 33vh !important;
}

Finally, some media queries to keep our image relatively square on smaller screen sizes. Again if you are not using object-fit you can leave this entire section out. You can also add some more media queries here if you want to cover other screen sizes but this should be enough for most scenarios.

@media only screen and (max-width: 1440px) {
    .ds-blog-four-column .ds-blog-square a img {
        height: 28vh !important; 
    }
}

@media only screen and (max-width: 1280px) {
    .ds-blog-four-column .ds-blog-square a img {
        height: 25vh !important;
    }
}

@media only screen and (max-width: 768px) {
    .ds-blog-four-column .ds-blog-square a img {
        height: 28vh !important;
    }
}

@media only screen and (max-width: 480px) {
    .ds-blog-four-column .ds-blog-square a img {
        height: 40vh !important; 
    }
}

And that’s it for the four column layout. Want 3 columns? Read on…

Three Columns:

Open up the row settings, click on the custom CSS tab and give it a Column CSS class of ds-blog-three-column. Be sure to add this to the Column CSS Class field and NOT the CSS Class field. Then save & exit.

Next, add the CSS from the toggle below into your child theme stylesheet, Divi options custom CSS box or the page specific CSS box.

Here’s what we are doing:

The default blog grid layout is 3 columns so we don’t need to make any changes there.

Here we are setting the margin between each row of posts so it is relatively even and then also setting a default height for our post images to make them square rather than rectangular. If you are not using the object-fit property which is not supported in IE and Edge as previously mentioned, then you can leave the second part of this section out.

.ds-blog-three-column .et_pb_post {
    margin-bottom: 25%;
}

.ds-blog-three-column .ds-blog-square a img {
    height: 45vh !important; 
}

And here we are adding some media queries to keep our image relatively square on smaller screen sizes. Again if you are not using object-fit you can leave this entire section out. You can also add some more media queries here if you want to cover other screen sizes but this should be enough for most scenarios.

@media only screen and (max-width: 1440px) {
    .ds-blog-three-column .ds-blog-square a img {
        height: 40vh !important; 
    }
}

@media only screen and (max-width: 1280px) {
    .ds-blog-three-column .ds-blog-square a img {
        height: 35vh !important; 
    }
}

@media only screen and (max-width: 768px) {
    .ds-blog-three-column .ds-blog-square a img {
        height: 28vh !important;
    }
}

@media only screen and (max-width: 480px) {
    .ds-blog-three-column .ds-blog-square a img {
        height: 40vh !important; 
    }
}

And that’s it for the three column layout. Want 2 columns? Read on…

Two Columns:

Open up the row settings, click on the custom CSS tab and give it a Column CSS class of ds-blog-two-column. Be sure to add this to the Column CSS Class field and NOT the CSS Class field. Then save & exit.

There is one more step with the two column layout. Open up the module settings, click on the Custom CSS tab and right after the class that we added earlier, leave a single space and add another class of ds-blog-square-two then save & exit.

Next, add the CSS from the toggle below into your child theme stylesheet, Divi options custom CSS box or the page specific CSS box.

Here’s what we are doing:

This section changes the layout from the default 3 columns to 2 columns. We are also removing the margin after every even post so our layout has the same margin around every post.

@media only screen and ( min-width: 981px) {
    .ds-blog-two-column.et_pb_column_4_4 .et_pb_blog_grid[data-columns]::before {
        content: '2 .column.size-1of2' !important;
    }
    .ds-blog-square-two.et_pb_blog_grid .column {
        width: 47.25% !important;
        margin-right: 5.5%;
    }
    .ds-blog-square-two.et_pb_blog_grid .column:nth-child(even) {
        margin-right: 0;
    }
}

Here we are setting the margin between each row of posts so it is relatively even and then also setting a default height for our post images to make them square rather than rectangular. If you are not using the object-fit property which is not supported in IE and Edge as previously mentioned, then you can leave the second part of this section out.

.ds-blog-two-column .et_pb_post {
    margin-bottom: 12%;
}

.ds-blog-two-column .ds-blog-square a img {
    height: 70vh !important; 
}

Lastly, some media queries to keep our image relatively square on smaller screen sizes. Again if you are not using object-fit you can leave this entire section out. You can also add some more media queries here if you want to cover other screen sizes but this should be enough for most scenarios.

@media only screen and (max-width: 1440px) {
    .ds-blog-two-column .ds-blog-square a img {
        height: 60vh !important;
    }
}

@media only screen and (max-width: 1280px) {
    .ds-blog-two-column .ds-blog-square a img {
        height: 50vh !important;
    }
}

@media only screen and (max-width: 768px) {
    .ds-blog-two-column .ds-blog-square a img {
        height: 28vh !important;
    }
}

@media only screen and (max-width: 480px) {
    .ds-blog-two-column .ds-blog-square a img {
        height: 42vh !important;
    }
}

For each version of this layout you will probably want to go into the advanced settings tab of the module and adjust the header font size for desktop, tablet and mobile depending on which font you are using.

And that’s it. Now you should have a lovely 2, 3 or 4 columns layout just like my demo.

If you found this helpful please leave a comment and subscribe to my newsletter for all my latest Divi related content.

Michelle X