Auto Gallery

One of the really usefull features of the CSS Grid Layout Module is the minmax() function which enables a minimum and maxoimum size to be assigned 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. All this with a minimum of code.
Grid
In this example. the grid item's minimum width has been set to 300px and the row height to 360px.
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 optional lazy loading feature allows the gallery to have up to 480 images without effecting the page download time.
Captions
The optional captions can use a Google hosted or non web safe font with a web safe fallback if required. The thumbnails can appear on hover when viewed on computers by checking a box.
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.
Auto Height
The example below shows the difference in the grid layout when auto height is used. All the images in any row assume the aspect ratio of the image(s) with the lowest aspect ratio.