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 lightbox slideshow has a slide counter and slide up image captions. The slides 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.
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.