One thing we really don’t like about the Blog Grid module is that if you have different lengths of excerpts, then each card in the Blog Grid has a different height. Luckily with a little bit of CSS tweaking, we can change that. To show you what we mean and what this tutorial is about, we will go from this:

Divi Blog Grid with unequal columns

to this:

Divi Blog Grid with Equal Column Height

But before we tell you the CSS, lets talk about what we need to do. After all you are here to learn something and not to only copy some code without understanding it, right? Okay so the things we are trying to achieve are:

  • Each column of the Blog Grid should have the same height
  • The read more button should align nicely at the bottom of the card

To achieve this, we need to take care of a few things. Lets start by inspecting the structure of the module to find out, whats going on and where we can hook ourselves into. Right-click anywhere on the page and use your developer tools to inspect the HTML structure of your page. Alternatively choose “View Sourcecode”. With the inspection tool, you can hover over the different elements of the module. We immediately notice that the columns have different heights.

Fortunately there is a simple fix to give elements a flexible, yet equal height: flexbox. To do that, we simply display the parent container as flex and give our columns a flex value of 1 which basically means: fill your parents container even if you are smaller. The parent container with the “display: flex” attribute then gets the height of the tallest element and each smaller element fills the gap. Since we are playing around, lets not add the CSS to our actual Divi Custom CSS but only to the inspector so we can make sure everything works before we mess up our site.

Okay, the columns now have a equal height but the cards still look different. Lets take care of that. Again we first inspect to see whats going on. We notice that the “article” element has different heights.

Again we use flexbox to fix this. We do so by displaying the columns as flex as well but this time we use a flex-direction of column instead of row. Besides that, we give the “article” element a flex value of 1 so it fills its parent no matter what, just like we did before with the columns.

Finally we need to do something so the read more button sticks to the bottom. Yes, you guessed it right: we will use flexbox for this. Once again we display something as flex and use flex: 1 on a child element. This time, the “article” and the “post-content” are our targets. Oh, and to be able to use justify-content on the “post-content”, we also display it as flex.

Okay, now that we know the CSS we need, we can wrap it up and put it in our Divi Custom CSS field. We don’t want to affect any other elements which by accident have the same CSS classes so lets give the Blog Grid module a custom CSS class and put this class in front of each customization we made. The final CSS should look like this (we also polished it up a little bit for cross browser compatibility with this tool and to fit the margins of our page, you might want to adjust the values to your liking):

Thats it, that wasn’t to hard, was it? If you want to learn more about the powers of flexbox, there are a lot of good tutorials out there. Like this one from css-tricks.com. We hope that today you learned something and if so, we would love to hear from you in the comments below.