Preparing the layout
For this customization to work properly, we need to use the Blog module with the Fullwidth Layout. The Grid will be created using the Isotope JS library.
Add the Blog module to the Page
Open the Blog module's settings and go to Design Tab → Layout
Choose Fullwidth
In Advanced Tab → CSS ID & Classes → CSS Class, type in
divi_isotope_blog
In Divi → Theme Options → General Tab → Custom CSS, add this CSS code:
.divi_isotope_blog .et_pb_post {
width: calc((100% / 3) - 20px);
margin-bottom: 20px;
border: 1px solid #d8d8d8;
padding: 20px;
}
.divi_isotope_blog .et_pb_post .entry-featured-image-url {
margin: -20px -20px 30px -20px;
}
@media (max-width: 980px) and (min-width: 768px) {
.divi_isotope_blog .et_pb_post {
width: calc((100% / 2) - 20px);
}
}
@media (max-width: 767px) {
.divi_isotope_blog .et_pb_post {
width: calc(100% - 20px);
}
}In Divi → Theme Option → Integration tab > Header, add this Js Code:
<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>
<script id="masonry-blog-layout">
(function ($) {
$(document).ready(function () {
var gutter = Number($('.divi_isotope_blog').css('--space-between-each-post').replace('px', ''));
function initIsotope() {
var $container = $('.divi_isotope_blog .et_pb_ajax_pagination_container');
// Check if Isotope has already been initialized
if (!$container.data('isotope-initialized')) {
$container.isotope({
itemSelector: '.divi_isotope_blog .et_pb_post',
percentPosition: true,
masonry: {
gutter: gutter,
columnWidth: '.divi_isotope_blog .et_pb_post'
},
});
// Set a flag to indicate that Isotope has been initialized
$container.data('isotope-initialized', true);
} else {
// If already initialized, just reload Isotope
$container.isotope('layout');
}
var wrapperHeight = $container.css('height');
$('.et_pb_ajax_pagination_container > div').css({
'top': wrapperHeight,
'position': 'relative'
});
}
initIsotope();
$(document).ajaxComplete(function () {
setTimeout(initIsotope, 250);
});
});
})(jQuery);
</script>
The result of the above CSS and JS code:
