A grid layout with images and a text section with a heading, text and an optional link.
The images lay themselves out in the order that they are inserted. The text section has its row number, row span column number and column span defined at each break point.
This grid illustrates the versatility of the CSS Grid Layout Module.. where items can be repositioned in the grid using their column and row number and span.
Animation
The captions can be inserted at the top, center or bottom and can animate in on hover. Captions can have two or more lines by using the return key to create line breaks.
The optional link icons can appear on hover if requires.
Images
The grid can have up to 48 images which can be configured as internal or external links with a new window option.
The images have a control for adding a scale animation on hover.
Text Section
The HTML5 <article> element has a heading, text and an optional link. The link can open internal or external pages and has a new window option.
The link can be aligned left, center or right and can be styled with or without a contrasting background and/or border.
In the example above, the link has no border nad its background is thee same as the article's background color.
The link is styled like an "Apple" link by adding two heavy right-pointing angle quotation symbols. The HTML code is ❯
In this example the items per row for each device re,ain the same but the grid items have a gap and the text is in row two and, column 1 with a column span of 2.
On tablets in portrait mode there are two columns. The <article> is in column 1 and spans two rows.
On mobile phones the text is in column 1, row 1 and appears above the images.
The animated captions have been moved to the bottom.