How to Equalize the Posts' Height Within the Blog Module

Creating a uniform and visually appealing layout for your blog posts can enhance the user experience and improve the overall aesthetics of your website.

If you're looking to equalize the height of posts within the Blog Module in Divi, you can follow the following steps:

Open the Blog module settings by clicking on the Gear icon
Go to the Design Tab → Layout and select Grid
Go to Advanced Tab → CSS ID & Classes → CSS Class and set a custom CSS class to the Blog module. You can use dt-blog-equal-height
Go to Divi → Theme Option → Integration tab → Header

Add this JS code:

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

    $('.dt-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 () {
      $('.dt-blog-equal-height').imagesLoaded().then(function () {
        $('.dt-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>

The result can be seen in the GIF below:

Divi - Blog module with Equalized Heights

Important note: The code used in this article only works when Standard or Video Posts format is used. If you are using other post formats such as Audio, Quote, Gallery or Link, the above-shared code will not work.