Offset Images

Using an offset grid to create white space on a web page has become very popular with leading designers now that the CSS Grid Layout Module has been universally accepted.
When viewed on computers, this grid has eight columns and two rows. The first 3 images occupy the first three columns in row 1 and the remaining ones occupty columns 6 to 8 in row 2.
For those who are interested in what goes on behind the scenes on a web page, the position of images 4, 5 and 6 are defined by their row and column number using the CSS :nth-child(n) selector.
Images
The images are inserted in a <figure> element with alt text for the search engines. The caption inserted in a <figcaption> element which is absolutely positioned to overlay the bottom of the image.
The <figure> can have a border if required.
Break Point
At the first break point - which is user selectable - the number of columns is reduced to 3 and images 4, 5 and 6 are placed in specific columns in row 2 - again using the :nth-child(n) selector.
The next break point is preset for mobile phones in portrait mode. The number of columns is reduced to 2 and the images sit side by side in pairs.
Item Spacing
When using the CSS grid layout, items can have their spacing quickly adjusted using the grid-gap property. There are separate controls for adjusting the spacing above and below the break point and on mobile phones.
Captions
The optional captions can be styled for font size, color and background color and its opacity. They can appear on page load or on hover when viewed on computers.
Links
The images can be configured as hyperlinks to open internal or external pages with a new window option. The info icon can be turned on to indicate that the image is a link. It can be styled for icon color, hover color and background color and its opacity.
Link the captions, the icons can be set to appear on hover when viewed on computers.