1 + 4 Responsive Image Grid

This type of responsive image grid layout is popular for creating image links to new items, blog posts, latest news etc. It is quite difficult to create and requires a lot of code and, in some cases, javascript.
Using the CSS Grid Layout Module requires very little code and allows the item spacing to be easily adjustable.
The images are loaded using the EverWeb Widget API Assets List so it is easy to delete an old one, add a new one and drag it to the top of the list.
Images
The images should all heve the same aspect ratio. The first image should be cropped to a width of at least half the maximum width before importing into EverWeb. The remaining images can be smaller.
The images used in this demo are 800 x 480px for the larger image and 600 x 360px for the others. If viewing this page on a computer, reduce the browser width to change the layout and it will be obvious why these sizes have been chosen.
The images can be styled using the controls for border width, color and radius.
Captions
Captions are turned on globally and overlay the image at the bottom. The caption background has controls for adjusting the color and opacity.
The captions can appear on hover when viewed on computers if required.
Links
The images can be configured as hyperlinks to open internal or external pages and in a new window if required. Follow the link below to find out how to create links using relative and absolute file paths.
There is an option to turn on a link icon to indicate to touch device users that the image is a link. The icon can be made to only appear on hover when viewed on computers. The link icon is selectable on a per slide basis.
Grid
The grid background color has controls for color and opacity and there is a control for adjusting the vertcial spacing in relation to the items above and below.
Spacing between the items is adjusted using the "grid-gap" property and the overall padding can be adjusted too.