How to align your Divi Blog module grid

The Divi Blog module design settings allow you to choose to have your blog posts display as either a grid layout or as a full-width layout.

You may find that you need to align your Divi blog post listings manually when using the grid layout due to differences in post heights.

The 2 main reasons your Divi blog grids are not aligned will be because of;

1. The length of your post title
2. The length of your excerpt

This post will show you how you can align your posts on your blog grid page with a few simple steps.

Align blog module post titles

The post title is the most likely cause of the misaligned blog grid in Divi. I usually try and set a post title to be a certain character number range for SEO reasons, but sometimes the title will cover 1 line and sometimes 2 lines. This was the case on the blog page on this site.  The titles were all within a reasonably close range of characters, so even by changing the title font size, there were still alignment issues.

To fix the alignment on the blog post titles you can set a minimum height using custom CSS within the Blog modules settings.

The height you need to set will depend on the length and text size of your post titles. My blog uses a 14px font for post titles and they were all displaying over either 1 or 2 lines, so I set a minimum title height to allow space for 2 lines of text.

To set the minimum height for your blog post titles

1. In the Divi Blog module go to the Advanced settings tab and scroll down to the Title CSS input box.
2. Add the following CSS

   min-height:30px;

3. Adjust the minimum height as required

Align blog module excerpts

I do not use post excerpts on my blog page as it keeps the layout clean and in my opinion benefits SEO for blog posts.

You can show or hide post excerpts on your blog module in the module settings under Content > Elements > Show Excerpt. When this is activated it will show your excerpts. You can also toggle the Use Posts Excepts under Content > Content > Content Length, which will use manually added post excerpts rather than automatically generating them from your post content.

By default, the excerpt length is set to 270 characters, but depending on your post excerpt font size, you may still see some listings spilling onto an extra line and causing them to not align.

To fix this you can set a custom Excerpt length in the module settings that align with your font size so that the posts will all fall within the same number of lines.

To set the character limit for your blog post excerpts

1. In the Divi Blog module go to the Content settings tab and scroll down to the Excerpt Length section.
2. Adjust the excerpt character limit as required

Final thoughts on blog grid alignment in Divi

For many, the misalignment of your posts on your Divi blog page is not a big deal, but for OCD designers it is beyond annoying. By using the 2 simple fixes mentioned above you can get your alignment in order in a couple of minutes. Hopefully, my posts stay aligned on the DTE blog.

Share your own blog grids below and let’s see if you align, or not!