Flexible galleries

Works either with images in the <img>tag, or in a div where the image is set with the background-image property (or even both).
Because the gallery grid automatically adapts to the width of the container, it is much easier to make the gallery responsive for mobile web browsers.

CSS

/* Items container */
.items {
    /* The minimum width of the thumbnails */
    --width: 200px;
    /* Thumbnail height */
    --height: 200px;
    /* Spacing */
    --spacing: 10px;
    /* Flexible width */
    --max-width: 1fr;
	/* Creates the grid */
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--width), var(--max-width)));
    grid-auto-rows: var(--height);
    grid-gap: var(--spacing);
}

/* Item */
.item,
.item img {
    width: 100%;
    height: 100%;
    background-size: cover;
    object-fit: cover;
}

HTML

<div class="items">
    <div class="item" style="background-image:url('images/1.jpg');"></div>
    <div class="item"><img src="images/2.jpg"></div>
    <div class="item"><img src="images/3.jpg"></div>
    <div class="item"><img src="images/1.jpg"></div>
    <div class="item"><img src="images/2.jpg"></div>
    <div class="item"><img src="images/3.jpg"></div>
</div>

Example

Resize the container by dragging the slider to the left and see what happens. The sample code also shows you how to link the thumbnails so that you can view them at full size.
(The slider is only part of the demo to demonstrate how the gallery behaves at different resolutions and container widths)

Flexible galleries with CSS: grid

Example