Logo

EverWeb Widgets

News Grid

Grid Images

This image grid uses the CSS Grid Layout Module to allow the insertion of images with four different aspect ratios.
The demo uses fourteen images. Images can be one of four classes - big, normal, tall and wide. Images were cropped to these sizes before importing into EverWeb …
Normal - 300px x 300px
Tall- 300px x 600px
Big - 600px x 600px
Wide - 600px x 300px

Once the images have been inserted and given the appropriate class name they can be dragged up or down the Assets List to reorder them.
The grid gap and all around padding can be adjusted. Captions can be aligned both horizontally and vertically and the link icons are optional.
The overlay has contols for background color and its opacity and can appear on hover when viewed on computers.