html gallery
<style>
.grid {
display: grid;
gap: 20px;
}
.grid--gallery {
grid-template-columns: repeat(4, 1fr);
}
.image {
position: relative;
}
.image.is-square {
padding-top: 100%;
}
.image img {
position: absolute;
inset: 0;
/*
Use this if inset is not supported
top: 0;
right: 0;
bottom: 0;
left: 0;
*/
width: 100%;
height: 100%;
object-fit: cover;
z-index: 1;
}
</style>
<div class="grid grid--gallery">
<div class="grid__item">
<div class="image is-square">
<img src="[IMAGE_URL]" alt="[IMAGE_ALT]" />
</div>
</div>
<!-- Repeat grid__item for all images in gallery -->
</div>