The Ultimate Divi Bundle - 5 Divi plugins. 1 great price.

Learn More

The Divi Theme’s image gallery module gives you the option of displaying your image gallery as a series of thumbnails (grid view). I’ve added an option into Divi Booster (under “Modules > Gallery”) to easily control the number of images per row and their size:

Technical Details – Changing Gallery Grid Image Sizes

To manually adjust the size and spacing of the images in your thumbnail grid, you can use the following CSS.

/* Set the image widths */
.et_pb_gallery_grid .et_pb_gallery_item,
.et_pb_gallery_grid .column_width,
.et_pb_gallery_grid .et_pb_gallery_image,
.et_pb_gallery_grid .et_pb_gallery_image.portrait img
{
    width: 250px !important;
}
.et_pb_gallery_grid .et_pb_gallery_image img
{
    min-width: 250px;
}

/* Set the image heights */
.et_pb_gallery_grid .et_pb_gallery_image,
.et_pb_gallery_grid .et_pb_gallery_image.landscape img
{
    height: 250px !important;
}
.et_pb_gallery_grid .et_pb_gallery_image img
{
    min-height: 250px;
}

/* Set the spacing between images */
.et_pb_gallery_grid .gutter_width { width: 25px; }
.et_pb_gallery_grid .et_pb_gallery_item { margin-bottom:25px !important; }

It looks complex, but it’s very simple to change it to suit your needs. There are three parts. First we set the image width to 250px. Then we set the height to 250px (to get square images, in this case). Finally we set the space between side-by-side images to be 25px.

The width normally available to the gallery images is 1080px and if the images are take up too much space the ones on the end will be pushed down to the next row. So if you want 4 images per row, make sure that 4*width + 3*spacing <= 1080px.

Divi 2.4 Update

Some extra CSS is required to make it work with Divi 2.4. You need to add the following, changing the bits in bold to suit your needs. The “4n” and “4n+1” parts should be changed to “Xn” and “Xn+1” where “X” is the number of images you want per row, and the “24px” part should be changed to your desired margin width minus 1.

.et_pb_gallery_grid .et_pb_gallery_item { clear:none !important; }
.et_pb_gallery_grid .et_pb_gallery_item:nth-child(4n) { margin-right:0 !important; }
.et_pb_gallery_grid .et_pb_gallery_item:nth-child(4n+1) { clear:both !important; }
.et_pb_gallery_grid .et_pb_gallery_item { margin-right:24px !important; }
.et_pb_gallery_grid .et_pb_gallery_image img { min-height: 0 !important; }
.et_pb_gallery_grid .et_pb_gallery_image,
.et_pb_gallery_grid .et_pb_gallery_image.landscape img
{
    height: auto !important;
}