We don’t know why the default for Divi Blog Modules in Grid layout uses three columns only. We suspect that, given the default word count for blog excerpts, using four colums would have made blog grids look very narrow (and very tall). This article is going to explain how we can re-style the Divi Blog module to get responsive, four column Divi Blog Grids.

To achieve this, the first thing that is useful to understand is how the blog grid itself is structured. We are going to use some CSS to modify the layout, so we would like to consider how best to set the blog module up in order to make the CSS as simple as possible. If you do the obvious, and put a blog module in a single column row, and set it to display four blog articles that is a start –

We will look at this with Google Chrome Inspect in a moment (if you prefer an alternative, that’s fine). Here is what the output looks like. I’ve switched OFF the display of the featured image, just to make it slightly more compact. Try inspecting the blog module below –

A Simple Divi Event System

A client of ours recently wanted to display events on their website. They weren’t planning a huge number of events, maybe one a month spread through the year. They wanted a simple way to add events, write a post about the event and then display these ‘event posts’ both as a grid (for upcoming events on the home page) and as an archive (for listing all of the events).

Using Flex To Align Divi Social Media Follow Icons And Text

Divi Social Media Follow icons are useful but we often find ourselves wanting to mix (and align) them with text in a table. It turns out that achieving something like the following is not that easy - twitter Twitter URL facebook Facebook URL dribbble foo@baz.co.uk If...

Responsive Divi Menus

Divi has some built in breakpoints to support responsive design. One of them, at 980px, changes the desktop menu into the hamburger. Unfortunately, above 980px, menus that contain a lot of text will wrap onto a second row. In this article we talk about some ideas for...

The first thing we noticed is that the main container, the et_pb_blog_grid holds three <div>s (top right of the image). These <div>s are the three columns for the blogs. The first image shows that the first and fourth blogs are contained inside the first column.

The second image shows that the second blog is inside the middle column. So the blogs are arranged in three columns, one above the other. It looks like Divi puts the 1st, 4th, 7th etc. blog in the left column then puts the 2nd, 5th, 8th etc. blog in the middle column and the 3rd, 6th, 9th etc. blog in the right column. There are no rows, just three columns, and each is a separate <div>.

So this structure looks quite problematic in respect of creating a four blog row. It’s difficult to see how we can overcome what is, in effect, a re-ordering of the blogs by Divi. What we really need, is to find a layout that causes Divi to put all of the blogs, in the right order, into a single <div>. Then we might be able to re-style this with CSS to give us what we want.

It turns out that if you use a multi-column row, where the first column is 1/4 or 1/3 or 1/2, Divi puts all of the blogs into that column.

Ok, to see this working, create a new row and split it to contain two columns. We are using a 1/4 to 3/4 split in the example. Put a blog module into the left hand column, give it a grid layout and specify the number of blogs to be displayed as four. Do not put anything into the other column. 

What this does is to place all of the blogs into a single <div> instead of them being distributed across the three <div>s previously. This lets us style them more easily – they are all indide the same <div> and in the correct order. We will now use some CSS to expand this div so that is fills the page and we will control the width of each blog so that they are only taking up a quarter of the page. So, we can make it appear as though we have four blogs per row. 

First, give the row a class name so we can target it from our CSS. We use four-column-blog-grid.

We target the row using this class name. We do this by going to Row Module Settings -> Advanced and entering four-column-blog-grid into the CSS Class field.

Here is the CSS to do this. We strongly recommend using a child theme for this but you can instead put your CSS into Divi->Theme Options->Custom CSS if you want.

Just be aware, it’s important to put nothing else in that row apart from the blog. If you do add something, it is likely to be misaligned.

 

.four-column-blog-grid .et_pb_column_1_2,
.four-column-blog-grid .et_pb_column_1_3, 
.four-column-blog-grid .et_pb_column_1_4 {
    width: 100%;
}

.four-column-blog-grid .et_pb_post {
    display:inline-block;
    vertical-align:top;
    width: 23%;
    margin-right:15px !important;
    margin-bottom:15px !important;
}

So what does this CSS do? Well, the first thing it does is to expand the column that holds the blog module to be full width. Though the example above used a 1/4 to 3/4 split for the row, we have added appropriate classes to the CSS so that it should also work for a 1/2 to 1/2 split and a 1/3 to 2/3 split. It probably won’t work with any other splt.

The next piece of CSS is targeted at the individual blogs themselves, these are the objects with class et_pb_post. The first thing to notice is that we set the width and margins. The intention of this is to allow for four blogs per row. The crucial part of the CSS though is the  display:inline-block; vertical-align:top; What this does is to align the top of the blogs. Now, we could have used float:left instead, but doing so would potentially give problems with alignment when blogs are of different heights. This can easily happen, because the extract is of variable length (as are the blog titles themselves). If we used float:left, and if the blogs were of different heights, and the blog in the first column of the row above extends further down than the blog in the second column of the row above, the first blog in the next row would be placed under the second column and not the first column, leaving a big gap in the grid.

Though the approach used here sacrifices the masonry style behaviour that you get with the original three column grid, we think this is worth it, given the problem it solves. In fact, this is presumably why Divi chose to implement the original blog grid as three columns, placing blogs alternately in each of them. This is what gives the masonry layout.

So this is what we should end up with –

A Simple Divi Event System

A client of ours recently wanted to display events on their website. They weren’t planning a huge number of events, maybe one a month spread through the year. They wanted a simple way to add events, write a post about the event and then display these ‘event posts’ both as a grid (for upcoming events on the home page) and as an archive (for listing all of the events).

Using Flex To Align Divi Social Media Follow Icons And Text

Divi Social Media Follow icons are useful but we often find ourselves wanting to mix (and align) them with text in a table. It turns out that achieving something like the following is not that easy - twitter Twitter URL facebook Facebook URL dribbble foo@baz.co.uk If...

Responsive Divi Menus

Divi has some built in breakpoints to support responsive design. One of them, at 980px, changes the desktop menu into the hamburger. Unfortunately, above 980px, menus that contain a lot of text will wrap onto a second row. In this article we talk about some ideas for...

Featured By Elegant Themes In Their Divi Design Showcase

We were thrilled to recently discover that this website had been featured by Elegant Themes in their August Divi Design Showcase. Each month, Elegant Themes feature a few selected websites built using their theme, Divi. Most of the websites we have built for clients...

Positioning and Animating Divi Slider Text

By default, Divi slider text and buttons are placed centrally, after transitioning in from below. This article explains positioning and animating Divi Slider text with CSS, allowing you far greater control. This can be useful if it is difficult to read the text...

Gutterless Divi Gallery With Hover Effects

In this article we are going to explain how to create a gutterless Divi gallery with hover effects. We will use a zoom effect and a rotation effect on mouse hover. We are going to use the Divi Gallery module as a starting point. Here is what we want to end up with,...

Styling The Divi Mobile Menu

This post discusses styling the Divi mobile menu to give it a semi-transparent background, to colour the menu and submenu items, give the menu container round corners and change the hamburger to an ‘X’ when the menu is open. We will also show how to ‘fix’ the menu so that it remains visible when the mobile device is scrolled.

If you are concerned that the blog grid elements look really narrow, either use a full width row or, you could consider simply switching off the content, the excerpt. Unfortunately, you can’t do that in the backend and the only choice you have is to either display the excerpt or the whole post. With a little CSS though, we can stop the content from displaying at all. Simply add the following –

/* switch off the content display */
.four-column-blog-grid .post-content { 
  display:none; 
} 
.four-column-blog-grid .et_pb_post { 
  padding-bottom:0px;
}

And you should get something like (we left the featured image switched on this time) –

A Simple Divi Event System

A client of ours recently wanted to display events on their website. They weren’t planning a huge number of events, maybe one a month spread through the year. They wanted a simple way to add events, write a post about the event and then display these ‘event posts’ both as a grid (for upcoming events on the home page) and as an archive (for listing all of the events).

Using Flex To Align Divi Social Media Follow Icons And Text

Divi Social Media Follow icons are useful but we often find ourselves wanting to mix (and align) them with text in a table. It turns out that achieving something like the following is not that easy - twitter Twitter URL facebook Facebook URL dribbble foo@baz.co.uk If...

Responsive Divi Menus

Divi has some built in breakpoints to support responsive design. One of them, at 980px, changes the desktop menu into the hamburger. Unfortunately, above 980px, menus that contain a lot of text will wrap onto a second row. In this article we talk about some ideas for...

Featured By Elegant Themes In Their Divi Design Showcase

We were thrilled to recently discover that this website had been featured by Elegant Themes in their August Divi Design Showcase. Each month, Elegant Themes feature a few selected websites built using their theme, Divi. Most of the websites we have built for clients...

Positioning and Animating Divi Slider Text

By default, Divi slider text and buttons are placed centrally, after transitioning in from below. This article explains positioning and animating Divi Slider text with CSS, allowing you far greater control. This can be useful if it is difficult to read the text...

Gutterless Divi Gallery With Hover Effects

In this article we are going to explain how to create a gutterless Divi gallery with hover effects. We will use a zoom effect and a rotation effect on mouse hover. We are going to use the Divi Gallery module as a starting point. Here is what we want to end up with,...

Styling The Divi Mobile Menu

This post discusses styling the Divi mobile menu to give it a semi-transparent background, to colour the menu and submenu items, give the menu container round corners and change the hamburger to an ‘X’ when the menu is open. We will also show how to ‘fix’ the menu so that it remains visible when the mobile device is scrolled.

Lastly, we still need to make this behave well on smaller devices. This is where the choice of using vertical-align:top really pays off. Without this we get serious misalignment issues on resizing.

We have forced the Divi blog grid to put four columns in each row. So, on smaller devices, these blogs are very narrow. To improve things, we can increase the width of the .et_pb_post. When we do this, the blogs will overflow the row. We just need to make sure that, when we force it to wrap, we wrap two blogs only, so that it appears that we have two columns throughout. So, we will add some CSS to make the blogs wider, but they will only take up (roughly) half the space, creating the appearance of two columns. Here is the CSS to do this –

@media (min-width:981px) and (max-width:1200px) {
	.four-column-blog-grid .et_pb_post {
		width:46%;
	}
}

So, above 1200 pixels the blog grid will display as four columns and from 1200 to 981 pixels the blog grid will display as two columns. Now, the reason we have not styled below 980 pixels so far (thank you Rickard for pointing this out) is that, below this point, Divi makes some significant changes to the layout. It does this to make it responsive. In effect, Divi is ignoring our very carefully constructed layout and using its own. So, we need to modify our approach to make sure that our blog grid continues to function. At 980 pixels, Divi splits the content between two <div>s. Now, because we tricked Divi into displaying four blogs at a time, each using 23% of the width of the container, that is exactly what Divi does here. Below 980 pixels, without any extra CSS, Divi would simply place four blogs in each of these two <div>s, within a single row, making eight in total across the page. At 780 pixels, Divi swaps back to using a single <div>. So, it would have four of our blogs in it, per row.

All things considered, the simplest thing to do is to force each blog to be full width (100%) below 980 pixels. This means that, between 780px and 980px, each of our blogs will fill their containers. So, Divi will display two blogs per row between 980 and 780 pixels (one for each of the two <DIV>s) and one blog per row below 780 pixels. If you look closely at the behaviour of the blog grid at 980 pixels you should see it tranistion from having alligned tops (because of our CSS) to using a masonry grid layout as Divi takes over.

Here is the code needed for this to work –

@media (max-width:980px) {
	.four-column-blog-grid .et_pb_post {
		width:100%;
	}
}

Subscribe To Our Blog

If you found our blog article useful, why not subscribe? Get all of our articles and tutorials delivered direct to your inbox!

You have Successfully Subscribed!