How To Make The Divi Blog Grid Equal Height Tutorial by Pee Aye Creative

How To Make The Divi Blog Grid Equal Height

In this tutorial, I will show you how to equalize the height of the Divi Blog module grid "boxes" with a few extra bonuses.
Categories: Tutorials

Add A Custom CSS Class To The Blog Module

Before getting to the actual code snippet, we first need to go to the Blog module that we want to make equal height and add a custom CSS class. This CSS class will allow us to target any particular Blog module where you want the equal height effect to take place, and will not affect any others. To add this, go to the Blog module settings to the Advanced tab and open the CSS ID & Classes toggle. There you should add the class “pa-blog-equal-height” to the CSS Class input field. This same class will then be used in the code snippet below to match and link the code to this module.

Add The jQuery Code

Now we come to the big part of the tutorial, the code that does all the work. This is jQuery and it is at first glance a bigger than usual snippet, but I will explain all of it clearly down below. For now, go ahead and get the code added to your website.

If you are using our free Divi child theme, place this snippet into the scripts.js file and remove the <script> tags at the beginning and end. Otherwise, place this in your Divi>Theme Options>Integrations tab in the "Add code to the < head > of your blog" code area.

<script>
	(function ($) {
		var pa_equalize_button_height = "true";

		if (pa_equalize_button_height == "false") {
			function pa_equalize_blog_post_height(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);
				});
			}
		} else {
			function pa_equalize_blog_post_height(blog) {
				var articles = blog.find('article');
				var heights = [];
				var btnheights = [];

				articles.each(function () {
					var height = 0;
					var btnheight = 0;
					var basebtnmargin = 20;

					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').outerHeight(true);
					height += $(this).find('.post-content').outerHeight(true);

					btnheight += ($(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;
					btnheight += $(this).find('.entry-title').outerHeight(true);
					btnheight += $(this).find('.post-meta').outerHeight(true);
					btnheight += $(this).find(".post-content p").outerHeight(true);
					btnheight += basebtnmargin;

					heights.push(height);
					btnheights.push(btnheight);

				});

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

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

					var eachheight = 0;
					var eachbasebtnmargin = 20;
					eachheight += ($(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;
					eachheight += $(this).find('.entry-title').outerHeight(true);
					eachheight += $(this).find('.post-meta').outerHeight(true);
					eachheight += $(this).find(".post-content p").outerHeight(true);
					eachheight += eachbasebtnmargin;

					var requiredbtnmargin = (max_btn_height - eachheight) + eachbasebtnmargin;
					$(this).find(".more-link").css("margin-top", requiredbtnmargin + "px");
				});
			}
		}
    
		$(document).ready(function () {
			$(window).resize(function () {
				if ($(this).width() >= 768) {

					$(".pa-blog-equal-height article").each(function () {
						$(this).removeClass("pa-auto-height");
						$(this).find(".more-link").removeClass("pa-auto-margin");
					})
					$('.pa-blog-equal-height').each(function () {
						pa_equalize_blog_post_height($(this));
					});

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

						pa_equalize_blog_post_height(pa_blog);

						var observer = new MutationObserver(function (mutations) {
							pa_equalize_blog_post_height(pa_blog);
						});

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

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

					$(document).ajaxComplete(function () {
						$('.pa-blog-equal-height').imagesLoaded().then(function () {
							$('.pa-blog-equal-height').each(function () {
								pa_equalize_blog_post_height($(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);
					}
				} else {
					$(".pa-blog-equal-height article").each(function () {
						$(this).addClass("pa-auto-height");
						$(this).find(".more-link").addClass("pa-auto-margin");
					})
				}
			});
		});
	})(jQuery); 
</script>

jQuery Code Explanation

I’ll do my best to explain what is happening in simple terms. You can totally skip this, but if you are wanting to understand it a little, read on.

Line 3

This line of code determines if you want to align the read more buttons to the bottom, or not. If this value if set to “true” then it will do some height calculations and align the buttons to the bottom, and if it is set to “false” then it will not.

Lines 5-71

This part of the code snippet controls the main equal height effect and is based on the true or false value in line 3. It includes two functions, one that equalizes the blog posts heights and aligns the read more button and one that just equalizes the blog heights. The effects will take place whenever the browser screen size changes.

If the value in line 3 is set to true, then the code will equalize both the blog post height and also align the read more button to the bottom.

If the value in line 3 is set to false, then the code will only equalize the blog post heights and not affect the button alignment.

In summary, this section of the code is doing the following things:

  1. It saves all the information about each of the blog posts in the Blog module.
  2. It processes the information and calculates the height of each post.
  3. It checks all of the heights and compares them to find the tallest one.
  4. It applies that same value to all the other posts.
  5. It adjusts the button top margin to make it aligned to the bottom (depending on true or false)

Lines 72-79

This part of the code snippet is used to limit the equal height affect to screen sizes that are only Desktop and Tablet devices 768px and above. There is no need to apply the effect on smaller screens since there is only one column of the blog module. If we did not add this part, it would look bad on Phone. This works by removing the two classes “pa-auto-height” and “pa-auto-margin” from the code so that the equal height effect does not apply on Phone.

Lines 85-100

This part of the code snippet is checking and observing each of the various elements of the individual posts inside the Blog module. If any slightest possible change occurs in any element of the module, it will run the function to equalize the heights or align the button margin.

Lines 102-136

This part of the code snippet is used to make sure that all of this works properly when ajax pagination is used. It checks to make sure the featured image is fully loaded and the ajax is finished running, then it applies the equal height function.

Lines 137-144

This part of the code snippet adds the custom CSS for screen sizes below 768px. This works by adding the two classes “pa-auto-height” and “pa-auto-margin” to the code so that we can adjust the equal height effect and button margin top on Phone.

Add The CSS Code

There are two snippets of CSS code that can be added next.

If you are using our free Divi child theme, place this snippet into the style.css file. Otherwise, place this in your Divi>Theme Options>Custom CSS code box. If you need help, check out our complete guide on Where To Add Custom Code In Divi.

.pa-blog-equal-height .pa-auto-height {
    height: auto !important;
}

.pa-blog-equal-height .pa-auto-margin {
    margin-top: 20px !important;
}

In the jQuery snippet, we have added the custom class “pa-auto-height” which we will use now in the first part of the CSS snippet to remove the equalize height effect for screens below 768px.

We have also added the custom class “pa-auto-margin” which we will use in the second part of the CSS snippet to remove the automatic margin change and to provide a static margin-top value to all the buttons below 768px instead. You can change the value of margin as per your liking.

NOTE: In the jQuery snippet, there are two variables defined as “basebtnmargin” and “eachbasebtnmargin.” Both the margins are set to the value of 20. By default, Divi adds the margin-top of 20px to the more link button. If you happen to have changed the margin of the button in the design settings to some custom value then you need to update that same value in both of these variables in the jQuery for accurate results.

Alternative Method B: CSS Grid

After posting this, some people asked why we did not just use CSS Grid for this. It’s a fair question, but we did consider it and feel the above JavaScript method is usually better. Allow me to explain.

Considerations Before Choosing This Method

There are actually many reasons for me, but you are welcome to hold a different opinion. But for my followers, I provide what I feel is the best solution overall for them based on many factors and considerations. In this case, those are as follows:

1. The CSS Grid method requires the Blog module to be set to the Fullwidth layout which has less/limited design settings in the module, which means users will be forced to add more CSS to replace the missing design settings, which they may not know how to do.

2. The CSS Grid method requires the Blog module to be set to the Fullwidth layout which is not compatible with all other tutorial tricks and snippets for the Grid layout and this could break their layout and design.

3. The CSS Grid method loses the live Visual  Builder preview, which can confuse users, looks bad, and also makes the page extremely long when working in the builder and is overall pretty hectic.

4. The CSS Grid properties are not recognized by the Divi Custom CSS editors and they throw errors. Even though these are false positives, they can alarm users, make them feel like the code broken, or that they are doing something wrong

5. The CSS Grid method requires you to manually set the number of columns and rows for different screen sizes. This is not easy for beginners and will be very confusing.

How To Use The CSS Grid Method

You can proceed by adding the CSS class “pa-blog-equal-height” to the blog module just like we showed with the JS method above.

Make sure you set the Blog layout to Fullwidth instead of Grid.

After that, you can just add the following CSS to your website.

.pa-blog-equal-height .et_pb_ajax_pagination_container {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: 1fr;
	column-gap: 0.8em
}

.pa-blog-equal-height .et_pb_ajax_pagination_container article {
	padding: 1em;
	border-radius: 10px;
	border: 2px solid blue
}

.pa-blog-equal-height .et_pb_ajax_pagination_container div {
	grid-column: 1 / -1;
}

.pa-blog-equal-height .et_pb_post div.post-content a.more-link {
	position: absolute;
	bottom: 30px
}

.pa-blog-equal-height .post-content {
	padding-bottom: 4.5em;
}

@media all and (max-width: 980px) {
	.pa-blog-equal-height .et_pb_ajax_pagination_container {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media all and (max-width: 768px) {
	.pa-blog-equal-height .et_pb_ajax_pagination_container {
		grid-template-columns: repeat(1, 1fr);
	}
}
23
Last updated Jul 6, 2021 @ 5:45 pm

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative Co in the beautiful state of Pennsylvania. He loves helping small businesses, exploring, building websites with Divi, and teaching others.
Divi Adventure Club Product And Course Membership by Pee Aye Creative

Become A Member!

Gain access to everything we offer!

Learn More

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

7 Comments

  1. Mirko

    hi Nelson, thanks for your tutorial, I followed it slavishly, but, for some reason unknown to me, it doesn’t work, I don’t know what to do

    Reply
      • Joanna

        Hi, I’ve tried it as well and it doesn’t work for my website. When I set module to Grid and use colde with 3 columns it’s making 4-5 very long and bad looking colums, when I use it to full-width and uses code for 3 columns there are 3 but very messy (for ex. one post had a picture on the bottom od 1st column and the text with button was in 2nd column). I tried many times and it don’t want to work. Tried to use second method but when I paste code it says “expected RBRACE…”
        Tried even codes from your another post to set the post on equal height but it’s not working at all. I’m out of ideas 🙁

      • Hemant Gaba

        Could you please share the URL of the page where the blog module is present so that I can investigate further?

  2. Mike

    I have actually run through a few tutorials and was making pretty good progress until I applied the equal height code to it. I first added the button to the blog module. Next I used the tutorial to add 4 blog posts along with your style to change the background so it had the grey box around each post. Everything looked good up to this point.

    My final step was adding all the code to equalize the heights. When I tried that it did equalize them, but the gray background around each post doesn’t extend to the bottom of the post. Plus the button disappeared off the second post.

    I went through and checked everything to make sure I have followed each tutorial correctly so I am not sure what I am doing wrong. I might have to back out the equal height stuff if I can’t resolve it because it looks terrible the way it is now.

    Any idea where I should search to see if I have a mistake somewhere?

    Reply
    • Mike

      So playing around I discovered that I remove the tutorial about making it a grid of 4 blog post and go back to the standard 3 blog posts it seems to work at equaling the height, but it still removes the cool styling of the grey background box around each post. I am wondering if something is creating a conflict with the equal height and the grid of 4 blog posts. That is what it seems is happening, but I can’t be totally sure.

      Reply
    • Hemant Gaba

      Could you please share the URL of the page where you are facing this conflict?

      Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

Recent Posts

Pin It on Pinterest

0

Your Cart