How to Make Blog Posts Have the Same Height in the Divi Blog Module (Grid Layout)

The Divi Blog module is a powerful tool that allows you to create beautiful and engaging blog layouts. One of the options available in the Blog module is the Grid layout. This layout displays your blog posts in a grid of equal-width columns. However, by default, the height of the blog posts in the grid may vary depending on the content of each post. This can make your blog layout look inconsistent and unprofessional.

In this article, we will show you how to make all the blog posts in the Divi Blog module (in a grid layout) have the same height, regardless of their content length.

Steps to Make Blog Posts Have the Same Height in the Divi Blog Module (Grid Layout)

Step 1: Add the jQuery Snippet

First, you must add the JavaScript snippet to your Divi Theme Options.

Go to the Divi Theme Options page and navigate to the Integration tab. Next, paste the JavaScript snippet below into the Add code to the < head > of your blog field.

<script>
(function($) {
    $(document).ready(function() {
        $(window).resize(function() {
            $('.ap_blog_grid_same_height').each(function() {
                equalise_articles($(this));
            });
        });

        $('.ap_blog_grid_same_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() {
            $('.ap_blog_grid_same_height').imagesLoaded().then(function() {
                $('.ap_blog_grid_same_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>

Once the JavaScript snippet is added, apply the changes by clicking the Save Changes button.

Step 2: Add the CSS Class

Next, we will add a unique CSS class name to the Divi Blog module. Go to the Divi Builder editor and add the Blog module, or you can select your existing module. Afterward, ensure to set the layout of your Blog module to Grid.

On the module settings panel, navigate to the Advanced tab -> CSS ID & Classes. Afterward, add the ap_blog_grid_same_height CSS class name to the CSS Class input field.

That’s it. As you can see from the GIF above, the blog posts are the same height once you’ve added the CSS class to your Blog module. To improve your blog posts’ appearance, modify the module settings, adjust excerpt length, post count, etc.

The Bottom Line

When using the Divi Blog module in a grid style, achieving uniform blog post heights can enhance the overall aesthetics of your website. By using the JavaScript snippet above, you can ensure that blog posts within the grid maintain the same height. This creates a polished appearance and provides a more balanced and organized browsing experience for users.

If you often create WordPress websites with Divi, you can use Divi Cloud for time efficiency. You can store your Divi assets (layouts, theme builder templates, code snippets, etc.) in the cloud, and you can access that from any website you create.