How To 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:

• Custom CSS Box in the Divi Theme Options dashboard
• Advanced options tab of the sections, rows and individual modules
• Divi Builder Page Settings of an individual page
• Divi child theme style.css file – create one for free with our Divi Child theme generator
• CSS with WordPress plugins ( Divi Module Custom CSS Selectors, Custom CSS and JavaScript Developer Edition )

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!