The Grid

This grid uses the CSS Grid Layout Module to display random size images with the maximum amount of control and minimum code.
Slideshow
The slides in the lightbox slideshow can be navigated using the directional arrows or grab and drag on computer and by swiping on touch devices. The directional arrows can be turned off for mobile devices.
The slideshow has a choice of 30 transitions, a slide counter and controls for setting the transition time, autoplay eime and show/hide download links, fullscreen and zoom controls.
Autoplay & Play/Pause
Since autoplay should be avoided on responsive pages, there is a play/pause button. The optional progress bar has a control for changing its color.
Captions
The multiline thumbnail cations can use a web safe font or a non web safe or Google hosted font with a web safe fallback. The font family is ingerited by the slide captions which also have their own control for font size and color.
The thumb captions have controls for text align, line height and to adjust the sapcing from the thumbnail image.
Spacing & Styling
Items in a CSS Grid layout are separated using the "gap" property. Gap applies to the spacing of both columns and rows. In this case, the "grid-row-gap" and the "grid-column-gap" properties are used. for more control.
The grid can be moved away from the browser/device window edges using left/right padding.
The items have controls for border width, color and radius and box shadow color and radius.
Vertical Align
The images can be vertically aligned using the "align-self" property using the values "start", "center" or "end"
Images
The images should be optimised for size before importing into EverWeb. The images in this demo were bulk resized to 480px wide for better performance and fatser page download. Follow the link below to find out how to do this.
The large images are responsive up to the maximum width of the image file. For most purposes, the width of landscape images doesn't need to exceed 1200px and smaller is better for those visitors using mobile devices.
Smart Preload
The slideshow images have a smart preload function which will allow the next in line image to preload so that the visitor doesn't have to endure the loading icon when the image file sizes are large.