Snippet / Theme Options > Custom CSS and Gallery module CSS class
Masonry Gallery Layout
A CSS column approach for turning Divi Gallery module items into a masonry-style layout without forcing fixed row heights.
Add dfy-masonry-gallery to the Gallery module. This approach works best with images that can keep their natural proportions.
.dfy-masonry-gallery .et_pb_gallery_items {
column-count: 3;
column-gap: 18px;
}
.dfy-masonry-gallery .et_pb_gallery_item {
float: none !important;
display: inline-block;
width: 100% !important;
margin: 0 0 18px !important;
break-inside: avoid;
}
.dfy-masonry-gallery .et_pb_gallery_image,
.dfy-masonry-gallery .et_pb_gallery_image img {
width: 100%;
}
@media (max-width: 980px) {
.dfy-masonry-gallery .et_pb_gallery_items {
column-count: 2;
}
}
@media (max-width: 640px) {
.dfy-masonry-gallery .et_pb_gallery_items {
column-count: 1;
}
}Notes
- Do not use this when all gallery items need equal heights.
- Test lightbox behavior after changing gallery item display rules.