On this page I'm using the WordPress gallery shortcode:
[gallery ids="519708,519709,etc" size="medium" link="file"]
With the help of the following CSS I've been able to make it look nice on all screensizes:
.gallery { display:flex; flex-wrap:wrap; width:100% !important; margin-bottom:1rem !important; }
.gallery-item { width:33.333% !important; margin:0 !important; padding:0 8px 8px 0 !important; }
.gallery-icon { position:relative; padding-bottom:56.25%; }
.gallery-icon a, .gallery-icon img { position:absolute; top:0; right:0; bottom:0; left:0; height:100%; width:100%; }
.gallery-icon img { object-fit:cover; object-position:50%; border:1px solid var(--bs-light-border-subtle) !important; border-radius:var(--bs-border-radius); }
The only thing bothering me is the padding on the right that doesn't seem to be there when using the newer gallery Gutenberg block as seen on this page. I have been trying :nth-child(3n) on the .gallery-item but this doesn't give the effect I'm looking for.
Any ideas on how to fix this? It's probably just a minor thing I might be overlooking?
Solved it with the following CSS:
.gallery { display:grid; grid-template-columns:auto auto auto; gap:8px; }
.gallery > br { display:none; }
.gallery > dl { width:100% !important; margin:0; padding:0; }
.gallery-item { margin:0 !important; }
.gallery-icon { position:relative; padding-bottom:56.25%; }
.gallery-icon a, .gallery-icon img { position:absolute; top:0; right:0; bottom:0; left:0; height:100%; width:100%; }
.gallery-icon img { object-fit:cover; object-position:50%; border:1px solid var(--bs-light-border-subtle) !important; border-radius:var(--bs-border-radius); }
@media (max-width:767px) {
.gallery { grid-template-columns:auto auto; }
}