Overlay Gallery

The CSS Grid Layout Module minmax() function is used in this widget to assign a minimum width to the grid item. When use in conjunction with row height or auto rows it is possible to create a regular grid out of irregular thumbnail images and to make it responsive without using CSS media queries.
Grid
In this example. the grid item's minimum width has been set to 360px and the row height to 300px.
When viewed on mobile phones in portrait mode, the thumbnail images will be arranged in a sungle colun and, since their height is set to auto, will appear at their natural aspect ratio.
Images
The thumbnail images were created from the full size images by reducing their width to 360px using Preview.app.
The thumbnail images can be set to lazy load if there are more than a few of them.
Overlay
The overlay can show on hover when viewed on computers and has controls for the background color, hover opacity and mobile opacity.
It has a centered text section with a caption and options for a description, separator and lightbox icon.
Lightbox Slider
The slideshow image captions are derived from the thumbnail image's alt text. It has a slide counter and a close tab and the images are responsive up to the maximum width of the image file.
Mobile Phones
The thumbnail images regain their full height when viewed as a single column on mobile phones.
Auto Height Thumbnails
The grid below shows the thumbnail images set to auto height. All the thumbnails in a row assume the height of the tallest image.