The Blog Module "Grid" view (selected in Blog Module > Design > Layout > Layout) article "boxes" are not the same height initially - because each article/post can contain a different amount of content even if only Title of the post is shown. Longer post Title size on one Post can results in a "taller" article "box" when comparing it to other "boxes".
To equalize all articles first add a custom CSS class "et_blog_grid_equal_height" to:
Blog Settings > Advanced > CSS ID & Classes > CSS Class
(click on the image to see the full size)
Then insert and save the following JavaScript code into Divi > Theme Options > Integration > Add code to the < head > of your blog :
<script>
(function($) {
$(document).ready(function() {
$(window).resize(function() {
$('.et_blog_grid_equal_height').each(function() {
equalise_articles($(this));
});
});
$('.et_blog_grid_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() {
$('.et_blog_grid_equal_height').imagesLoaded().then(function() {
$('.et_blog_grid_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>
(click on the image to see the full size)
All Blog Grid articles, on each page of the Blog Module post listing, will get the height of the "tallest" article "box" on that page of the listing:
(click on the image to see the full size)
TIP:
If any of the articles has a "content overflow" problem where text goes out of the boundary of the article "box" - insert this CSS Code in the Custom CSS Box in the Divi > Theme Options page:
.et_blog_grid_equal_height article {
overflow: hidden;
}
Disclaimer:
This article works when Standard or Video Blog Posts are included in the Blog Module, using Audio Post format or any else Post Format will cause it to stop functioning.