Sidebar Image Grid

By adopting the CSS Grid Layout Module, we can design website features unlike all the other zillions out there with much less code and faster download speeds.
The widget creates a responsive width, fixed height hero image and grid sidebar. At narrower browser/device widths, the sidebar switches from two columns to one column and then slides below the image on small mobile devices.
The widget can be used for latest news items, links to products or pages, blog posts or podcast episodes and so on …
Rather than being full width, it is centered with a maximum width setting to keep the size of the hero image file to a reasonable size. The image used in this example was cropped to 800px wide before importing into EverWeb.
Height
There are controls for setting the height on computer and tablet and another one for phones in portrait mode. A checkbox sets the item to viewport height on phones.
Main Image
The image has an overlay with adjustable background color and opacity. There is a centered heading and text which can animate in by checking a box and setting the animation and delay times in seconds.
Grid
Since this is a CSS grid layout, all the grid items in any row adopt the same height despite varying amounts of content.
Each item has an image, overlay link icon, heading and text. The icon has controls for setting the color, hover color and the background color and its opacity. The background is there so that the link icon will be obvious when viewed on both light and dark images. If this is not required, the opacity can be set to zero.