Improve Your Divi Blog Layout NOW! (Equal Height Posts for Better Design)

Ever noticed how uneven blog post heights can make your layout look a little… off? Whether it’s due to varying image sizes, content lengths, or titles, inconsistent post height can mess with the flow of your design—especially in grid layouts.

In this quick tutorial, I’ll show you exactly how to equalize the height of your blog posts in the Divi Blog Module using a mix of built-in settings and a small snippet of JavaScript. No plugins, no fluff—just a clean, uniform look that keeps your blog looking polished and professional across all screen sizes.

And if you’re more of a visual learner, don’t worry—I’ve included a step-by-step video walkthrough too!
(Just don’t forget to grab the code below the video—you’ll need it to make the magic happen.)

CSS Class

Remember to give the blog module a class name. In the video tutorial I used

.dd-blog-equal-height

If you want to use this one and copy and paste it into Divi – remember to remove the . before dd (see the video if you are unsure)

Javascript Code

<script>
(function ($) {
  $(document).ready(function () {
    $(window).resize(function () {
      $('.dd-blog-equal-height').each(function () {
        equalise_articles($(this));
      });
    });

    $('.dd-blog-equal-height').each(function () {
      var blog = $(this);

      equalise_articles($(this));

      var observer = new MutationObserver(function (mutations) {
        equalise_articles(blog);
      });

      var config = {
        subtree: true,
        childList: true
      };

      observer.observe(blog[0], config);
    });

    function equalise_articles(blog) {
      var articles = blog.find('article');
      var heights = [];

      articles.each(function () {
        var height = 0;
        height += ($(this).find('.et_pb_image_container, .et_main_video_container').length != 0) ? $(this).find('.et_pb_image_container, .et_main_video_container').outerHeight(true) : 0;
        height += $(this).find('.entry-title').outerHeight(true);
        height += ($(this).find('.post-meta').length != 0) ? $(this).find('.post-meta').outerHeight(true) : 0;
        height += ($(this).find('.post-content').length != 0) ? $(this).find('.post-content').outerHeight(true) : 0;

        heights.push(height);
      });

      var max_height = Math.max.apply(Math, heights);

      articles.each(function () {
        $(this).height(max_height);
      });
    }

    $(document).ajaxComplete(function () {
      $('.dd-blog-equal-height').imagesLoaded().then(function () {
        $('.dd-blog-equal-height').each(function () {
          equalise_articles($(this));
        });
      });
    });

    $.fn.imagesLoaded = function () {
      var $imgs = this.find('img[src!=""]');
      var dfds = [];

      if (!$imgs.length) {
        return $.Deferred().resolve().promise();
      }

      $imgs.each(function () {
        var dfd = $.Deferred();
        dfds.push(dfd);
        var img = new Image();

        img.onload = function () {
          dfd.resolve();
        };

        img.onerror = function () {
          dfd.resolve();
        };

        img.src = this.src;
      });

      return $.when.apply($, dfds);
    }
  });
})(jQuery);
</script>

And that’s it! With just a few tweaks and a tiny JavaScript boost, your Divi blog grid now looks clean, balanced, and way more professional.

If you found this helpful, be sure to check out the rest of my Divi tips and tutorials. I’m always looking for ways to make your site look and perform better, with simple solutions that anyone can follow.