EverWeb Widgets

Artwork Display Grid

Artwork Image Grid
Grid items are aligned center. The options are start, center and end,
They can have a border and/or a box shadow.
Responsive Grid
Each item is an HTML5 <figure>
Varying Size Images
The caption is in a <figcaption> element for better SEO.
These captions use the Google hosted font Stint Ultra Expanded
Multiline Captions
Captions can extend to any number of lines.
Use the HTML5 line break <br> to create returns
Optional Image Links
The images can be created as links
Grid Column & Row Spacing
Grid item spacing is adjusted using the grid-column-gap and grid-row-gap properties.
Left/right padding and vertical spacing can be adjusted.

The Grid

This grid uses the CSS Grid Layout Module to display random size images with the maximum amount of control and minimum code.
Links
The images can be hyperlinks and be configured to open internal or external pages and in a new window if required.
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.

Image Resize

© EverWeb Widgets -