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

by | Nov 15, 2016 | Blog, CSS Tips & Tricks

Sign up to receive all the latest themes, tutorials, tips & tricks from Divi Soup

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

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.

How to create a 2, 3 or 4 columns square blog layout in Divi

 

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.

How to create a 2, 3 or 4 columns square blog layout in Divi

How to create a 2, 3 or 4 columns square blog layout in Divi

How to create a 2, 3 or 4 columns square blog layout in Divi

How to create a 2, 3 or 4 columns square blog layout in Divi

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.

Global CSS - Needed for all 3 layouts
/*--------------------------------------------------------------------*/
/*-----Two, Three and Four Column Square Blog Layout by Divi Soup-----*/
/*--------------------------------------------------------------------*/

/***Global styles required for all layouts***/

/*This scales the images keeping the aspect ratio. NOTE: Object-fit is not supported in IE and Edge so if you want to use the standard image size remove this section*/
.ds-blog-square a img {
    width: 100%;
    object-fit: cover;
}

/*This section hides the excerpt*/
.ds-blog-square .post-content {
    display: none;
}

/*This section corrects some margin and padding issues*/
.ds-blog-square .et_pb_image_container {
    margin: -19px -19px 0;
}

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

/*This section removes the bottom padding from the post and sets the position so we can move the title on top of the image*/
.ds-blog-square .et_pb_post {
    position: relative;
    padding-bottom: 0;
    border: none;
}

/*This section adds the semi transparent overlay and border on the image. It also sets the post title to absolute center*/
.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;
}

/*This section changes the border and overlay colour and border position on hover*/
.ds-blog-square h2 a:hover {
    background: rgba(255, 255, 255, .5);
    color: #000;
    outline: 2px solid #000;
    outline-offset: 0;
}

 

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.

How to create a 2, 3 or 4 columns square blog layout in Divi

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.

How to create a 2, 3 or 4 columns square blog layout in Divi

 

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

4 Columns CSS
/***4 Column Styles***/

/*This section changes the layout to 4 columns*/
@media only screen and ( min-width: 981px) {
    .ds-blog-four-column.et_pb_column_4_4 .et_pb_blog_grid[data-columns]::before {
        content: '4 .column.size-1of4' !important;
    }
    /*This section divides the width of the posts equally in the available space*/
    .ds-blog-four-column.et_pb_column_4_4 .column.size-1of4 {
        width: 20.875% !important;
        margin-right: 5.5%;
    }
    /*This removes the right margin from the last post on each row*/
    .ds-blog-four-column.et_pb_column_4_4 .column.size-1of4:nth-child(4n) {
        margin-right: 0;
    }
}

/*This sets the spacing between post rows*/
.ds-blog-four-column .et_pb_post {
    margin-bottom: 25%;
}

/*This section sets the height of the images on different screen sizes to keep it relatively square. If you are not using object-fit because it isn't supported in IE and Edge then you should remove this entire section or the images will be distorted*/
.ds-blog-four-column .ds-blog-square a img {
    height: 33vh !important; /*Adjust this value if you want the images taller or shorter*/
}

@media only screen and (max-width: 1440px) {
    .ds-blog-four-column .ds-blog-square a img {
        height: 28vh !important; /*Adjust this value if you want the images taller or shorter*/
    }
}

@media only screen and (max-width: 1280px) {
    .ds-blog-four-column .ds-blog-square a img {
        height: 25vh !important; /*Adjust this value if you want the images taller or shorter*/
    }
}

@media only screen and (max-width: 768px) {
    .ds-blog-four-column .ds-blog-square a img {
        height: 28vh !important; /*Adjust this value if you want the images taller or shorter*/
    }
}

@media only screen and (max-width: 480px) {
    .ds-blog-four-column .ds-blog-square a img {
        height: 40vh !important; /*Adjust this value if you want the images taller or shorter*/
    }
}

 

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) {
    .ds-blog-four-column.et_pb_column_4_4 .et_pb_blog_grid[data-columns]::before {
        content: '4 .column.size-1of4' !important;
    }
    .ds-blog-four-column.et_pb_column_4_4 .column.size-1of4 {
        width: 20.875% !important;
        margin-right: 5.5%;
    }
    .ds-blog-four-column.et_pb_column_4_4 .column.size-1of4:nth-child(4n) {
        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.

How to create a 2, 3 or 4 columns square blog layout in Divi

 

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

3 Columns CSS
/***Three Column Styles***/

/*This sets the spacing between post rows*/
.ds-blog-three-column .et_pb_post {
    margin-bottom: 25%;
}

/*This section sets the height of the images on different screen sizes to keep it relatively square. If you are not using object-fit because it isn't supported in IE and Edge then you should remove this entire section or the images will be distorted*/
.ds-blog-three-column .ds-blog-square a img {
    height: 45vh !important; /*Adjust this value if you want the images taller or shorter*/
}

@media only screen and (max-width: 1440px) {
    .ds-blog-three-column .ds-blog-square a img {
        height: 40vh !important; /*Adjust this value if you want the images taller or shorter*/
    }
}

@media only screen and (max-width: 1280px) {
    .ds-blog-three-column .ds-blog-square a img {
        height: 35vh !important; /*Adjust this value if you want the images taller or shorter*/
    }
}

@media only screen and (max-width: 768px) {
    .ds-blog-three-column .ds-blog-square a img {
        height: 28vh !important; /*Adjust this value if you want the images taller or shorter*/
    }
}

@media only screen and (max-width: 480px) {
    .ds-blog-three-column .ds-blog-square a img {
        height: 40vh !important; /*Adjust this value if you want the images taller or shorter*/
    }
}

 

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.

How to create a 2, 3 or 4 columns square blog layout in Divi

 

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.

How to create a 2, 3 or 4 columns square blog layout in Divi

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

2 Columns CSS
/***2 Column Styles***/

/*This section changes the layout to 2 columns*/
@media only screen and ( min-width: 981px) {
    /*Two columns*/
    .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%;
    }
    /*This removes the right margin from the last post on each row*/
    .ds-blog-square-two.et_pb_blog_grid .column:nth-child(even) {
        margin-right: 0;
    }
}

/*This sets the spacing between post rows*/
.ds-blog-two-column .et_pb_post {
    margin-bottom: 12%;
}

/*This section sets the height of the images on different screen sizes to keep it relatively square. If you are not using object-fit because it isn't supported in IE and Edge then you should remove this entire section or the images will be distorted*/
.ds-blog-two-column .ds-blog-square a img {
    height: 70vh !important; /*Adjust this value if you want the images taller or shorter*/
}

@media only screen and (max-width: 1440px) {
    .ds-blog-two-column .ds-blog-square a img {
        height: 60vh !important; /*Adjust this value if you want the images taller or shorter*/
    }
}

@media only screen and (max-width: 1280px) {
    .ds-blog-two-column .ds-blog-square a img {
        height: 50vh !important; /*Adjust this value if you want the images taller or shorter*/
    }
}

@media only screen and (max-width: 768px) {
    .ds-blog-two-column .ds-blog-square a img {
        height: 28vh !important; /*Adjust this value if you want the images taller or shorter*/
    }
}

@media only screen and (max-width: 480px) {
    .ds-blog-two-column .ds-blog-square a img {
        height: 42vh !important; /*Adjust this value if you want the images taller or shorter*/
    }
}

 

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

Michelle Nunan is a multi-award winning marketer & trainer and freelance web designer as well as a wife and mother of two beautiful girls and one cheeky Black Labrador called Harley. Michelle has been building websites since the late nineties, back in the days of GeoCities and Napster, before the web was the wonderful place it is now.

Join me on Facebook

WP Theme FAQs
Divi Switch
WordPress Theme Editor
Stock Images for as little as $0.69 each
Elegant Marketplace - Divi Child Themes, Plugins and Tutorials
Elegant Themes

Other recipes you might like...

Pin It on Pinterest

Share This
pro-membership

Enter your details below to get notified of the launch and early bird pricing

You have successfully joined the waitlist!