Elegant Themes Divi default Blog module using Grid Layout does not have an option to set the column heights to equal resulting to uneven column heights when displaying in grid layout. The code below will be able to fix it. It will automatically adjust the column height using CSS and Javascript.
Open Blog Module settings->advanced->CSSID & Classes and Add a CSS class name
pa-blog-equal-height
Go to Divi->Theme Options->Integrations and add the code in the <head> section
$(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);