All Collections
FAQ's and Troubleshooting
How to make a Masonry Blog layout using the Isotope JS library
How to make a Masonry Blog layout using the Isotope JS library

Customize the Blog module to create an Isotope Grid layout using Isotope JS library

Eduard Ungureanu avatar
Written by Eduard Ungureanu
Updated over a week ago

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.

  1. Add the Blog module to the Page

  2. Open the Blog module's settings and go to Design Tab → Layout

  3. Choose Fullwidth

    Blog module's layout

  4. In Advanced Tab → CSS ID & Classes → CSS Class, type in divi_isotope_blog

    Blog module CSS class

  5. 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);

  6. In Divi → Theme Option → Integration tab > Header, add this Js Code:

    <script src=""></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 (!$'isotope-initialized')) {
    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
    $'isotope-initialized', true);
    } else {
    // If already initialized, just reload Isotope

    var wrapperHeight = $container.css('height');
    $('.et_pb_ajax_pagination_container > div').css({
    'top': wrapperHeight,
    'position': 'relative'


    $(document).ajaxComplete(function () {
    setTimeout(initIsotope, 250);

The result of the above CSS and JS code:

Blog module using Isotope library to create a custom Mansonry layout
Did this answer your question?