How To Create a Masonry Layout With Divi’s Gallery Module

Last modified Sep 13, 2023
Difficulty Beginner
Language CSS, PHP
Category
Create a Masonry Layout With Divi's Gallery Module

Creating a masonry gallery with the Divi theme using only the built-in features and native Divi modules is a highly requested feature among Divi users. However, the Divi theme alone cannot achieve a masonry gallery layout without the use of additional plugins or custom code.  In this tutorial, we will explore one method of implementing a masonry layout for the Divi theme that involves implementing custom CSS Divi code snippet. Although it requires custom coding, it’s as simple as copying and pasting, and the end result will be stunning!

What Is A Masonry Layout?

A masonry gallery is a popular layout style for displaying elements, such as images, on a website. It is characterized by a grid-like structure where each item is positioned closely together, creating an organized and visually appealing arrangement. Unlike traditional grid layouts where all items have a fixed width and height, a masonry gallery allows for varying heights of items within a row. This results in a dynamic and fluid layout, with items aligning vertically based on their content’s height. The overall effect is a visually interesting and harmonious display of images or content that breaks away from the rigid structure of traditional grid layouts.

Step 1: Add the Divi Gallery Module

Insert the Divi Gallery module into your page. You can upload your images and configure the gallery settings using the module’s options. Make sure to select “Grid” under Design -> Layout.

 

Step 2: Insert the CSS Code

Next, add the provided CSS code to your site. This CSS code adjusts the column count and spacing based on different screen sizes.

There are several methods to add Divi custom CSS to their websites. These methods include:

Learn all methods from this article >>

To add CSS to page settings, from the front-end Divi visual builder, click on the Divi + icon to reveal the full menu selection. Click on the gear icon and you’ll reveal the Divi Page Settings. Within the Divi Builder Page Settings, go to Advanced Tab and paste the provided CSS into the Custom CSS box.

Customize the CSS to adjust the column count and spacing if needed – see the CSS comments for reference.

/* 
Masonry Gallery by WP Zone
https://wpzone.co/wordpress-and-divi-code-snippets/
*/

.wpz-gallery-masonry .et_pb_gallery .et_pb_gallery_items {
    column-count: 3; /* number of columns for desktop */
    column-gap: 15px;  /* column spacing */
}

@media only screen and (max-width: 1200px) { 
.wpz-gallery-masonry .et_pb_gallery .et_pb_gallery_items { 
    column-count: 2;  /* number of columns for tablet devices */
} 
} 
@media only screen and (max-width: 767px) {
  .wpz-gallery-masonry .et_pb_gallery .et_pb_gallery_items {
    column-count: 1;  /* number of columns for mobile devices */
  }
}

.wpz-gallery-masonry .et_pb_gallery .et_pb_gallery_items .et_pb_gallery_item {
    width: 100%;
    margin: 0px 0px 10px 0!important; /* replace 10px to change row spacing */
    float: none!important; 
}

Step 3: Add the Custom CSS Class

To apply the masonry layout to your gallery, you need to add a custom CSS class “wpz-gallery-masonry” to the section or row that contains the Divi Gallery module.  Edit the section or row, navigate to the Advanced tab, and find the CSS Class option. Enter “wpz-gallery-masonry” as the custom CSS class and save your changes.

 

Save your page and preview it to see the Divi masonry gallery layout in action!

Watch the video below:

Step 4: If the Snippet doesn’t work

In some cases, if images are large, you will need additionally to add this PHP. By default, it will run for all gallery modules on the site.

add_filter( 'et_pb_gallery_image_width', 'wpz_gallery_image_width' );
add_filter( 'et_pb_gallery_image_height', 'wpz_gallery_image_height' );
 
function wpz_gallery_image_width() { 
    return '1080';
}

 
function wpz_gallery_image_height() { 
    return '9999';
}

 

Does this snippet (still) work?

Please let us know in the comments if everything worked as expected. We have tested this code with the Version: 4.22.1 of the Divi Theme.
If you think this code saved you time, we will be happy to receive a comment!

___

License: This snippet contains code from the Divi Theme, copyright https://elegantthemes.com, modified by WP Zone, November 13, 2019. Licensed under the GNU General Public License, no warranty; click here for details.

Your Comments

20 Comments

  1. Shailesh

    Hi!
    thank you for the tutorial! I am happy with how you instruct.

    I am not sure why the image sizes are uniform. is there a way to fix this?
    Each gallery on this page is comprised of images in landscape and portrait .
    here is the link to the work i am doing : https://klmcondotel.com/executive-twin-room/

    thank you

    Reply
    • Anna Kurowska

      Hello! Can you try adding PHP from Step 4 of the tutorial? I just added it.

  2. ivan

    Hello, I have tried as the tutorial says and it does not work, the images are very small and not as the tutorial says

    Reply
    • Anna Kurowska

      Hello, send us a link to the page and we will check it 🙂

    • bart

      If you are getting small images, apply this:
      width: 100% !important;

      Like so:
      .wpz-gallery-masonry .et_pb_gallery .et_pb_gallery_items .et_pb_gallery_item {
      width: 100% !important;
      margin: 0px 0px 10px 0!important; /* replace 10px to change row spacing */
      float: none!important;
      }

      This will force the settings to overwrite anything the theme gives it.

    • Anna Kurowska

      Hi Bart, I haven’t tested the snippet with small images, but I will do it for sure!

  3. Hans Koorneef

    Works ok for me still with all latest version…
    However, is there an option to align the pictures to the center of you are display 2 or 1 columns as well. They are now left aligned and that does look that great on smaller devices, certainly if you also have a kind of border around the images ?

    Reply
    • Anna Kurowska

      Images should be centered by default, can you send the link to your module?

    • Hans Koorneef

      site is not only, can I send you some screenshots?

    • Anna Kurowska

      I would need to inspect the code, screenshot may not be enough.

    • Anna Kurowska

      Hello! Can you try adding PHP from Step 4 of the tutorial? I just added it.

  4. sverleis

    Thanks for the code. Looks to not be working 100% for me. Possibly something to do with pagination?

    stirrups.co.za/gallery

    Reply
    • sverleis

      Fixed. I expected the ‘Image count’ setting to be the images per row.
      Thus, working as expected.. Thanks!

  5. Kathie

    I’ve been looking for a way to do this on my painting website, thanks for posting and sharing.

    The code does remove the spacing between the gallery items and “tile” them, but the images are cropped to either the selected thumbnail orientation (portrait or landscape) in the Module/Design/Layout Thumbnail Orientation section so I’m not seeing the full images. Any suggestions?

    Note – I do have several gallery related plugins on the site but none are applied to this page.

    Reply
    • Anna Kurowska

      Hi! The spacing can be customized by changing values in the CSS – take a look at the comments, there is a different selector for column and row spacing. The link you posted gives “No Results Found”, so I am not able to look at the issue with the aspect ratio. It is controlled by Divi, so Elegant Themes support should be able to help with that.

  6. Perly

    Unfortunately I can not make it work. The aspect ratio if the images are kept the same. No masonry effect. Also once I click an image to see them individually, when I go back the gallery is gone.

    Any ideas how to fix this?

    Reply
    • Anna Kurowska

      Hello! Make sure to add “wpz-gallery-masonry” class to the row, not the module. If that doesn’t fix the issue, send us the link to the page, and we will figure out why it isn’t working on your end 🙂

  7. Chris San-Claire

    What a great tip …. ideal to have different layouts

    Reply

Submit a Comment

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

Receive notifications about our new blog posts.

Previous snippet Search WooCommerce Products and Tags With Divi's Search Module