How to Set Space between Images in Divi Gallery Module

Do your Divi gallery images appear too close together, creating a cluttered look? Or maybe there’s so much space that they feel disconnected? This tutorial will help you find the perfect balance.

We’ll combine the Divi built-in feature option and CSS code to allow you to adjust the spacing between images in your Divi Gallery module. The result will be a professional and uncluttered presentation that goes well with the overall look of your website.

Steps to Set Space between Images in Divi Gallery Module

Step 1: Add the Gallery Module

Alright, we will start everything from scratch, go to the Divi Visual Builder to create a new post type (page/post).

Once you enter the visual builder, add a one-column row with a Gallery module.

Customize the Module

In the Gallery module settings, we will apply several changes here, as below:

• Content Tab
  • Images
    • Add some images that you want to appear in the image gallery. For this example, we add twelve images.
    • Image Count: 12
  • Elements
    • Show Title and Caption: NO
    • Show Pagination: NO

• Design Tab
  • Layout
    • Please ensure to set the layout of your gallery to Grid
  • Image
    • Add 10px of image corner radius to all four corners

Customize the Row

Next, we’re going to tweak the row settings. Here, we will apply some changes in the row settings, as follows:

• Design Tab
  • Sizing
    • Use Custom Gutter Width: YES
    • Gutter Width: 1
    • Width: 80%

Step 2: Add the Custom CSS

Alright, it’s time to add the CSS snippet. Please copy the CSS snippet below and paste it into the Row Settings (Advanced Tab -> Custom CSS).

selector .et_pb_gallery_grid .et_pb_gallery_item {
  padding-right: 10px;
  padding-bottom: 10px;
}

The Code Explanation:

This code snippet adds a 10px gap between each gallery item in the grid, both horizontally and vertically. This creates a sense of separation and breathing room between the images.

You can change the padding-right and padding-bottom values to suit your preferences for the space between images in your Divi gallery.

It is done. Changing the padding-right and padding-bottom values also alters the spacing between images in Divi Gallery, as seen in the image above.

Remember to save your project, and if you want to publish it, you can do so as well.

The Bottom Line

This tutorial provides you with two steps to set the spacing between images in your Divi gallery:

• Divi’s built-in options: This involves adjusting the gutter width in the row settings and setting a custom width for the gallery itself.
• Adding a CSS snippet: This allows for finer control by adding padding to each gallery item, creating a specific gap between the images.

By following these steps, you can achieve the perfect balance between image separation and a clean, uncluttered presentation for your Divi gallery.