Structure
A three column CSS grid layout. Each item is an HTML5 <article> element with a figure, heading and text.
EverWeb Widgets
RGL Stack 3 Info Items
Setup
The items are added using the EverWeb Widget API Assets List. Crop all three images to the same size and drag them together from the Finder and drop them onto the Assets List in the widget settings.
Select each file name in turn to enter the required data.
Captions & Links
If captions and/or links are selected, leave the boxes to show them on hover unchecked until the page is ready to publish so that they can be seen on the EverWeb design canvas,
Links can be entered as relative or absolute file paths and open in a new window if required. Follow the link below to find out about file paths.
Grid Item Gap & Align
Items in a CSS Grid layout are separated using the "gap" property. Gap applies to the spacing of both columns and rows. If more control is required, the "grid-column-gap" and the "grid-row-gap" properties can be used.
The grid can be moved away from the browser/device window edges using left/right padding.
Vertical Align
Grid items can be vertically aligned using the "align-self" property. These are …
[1] Auto - the item fills the height of the row
[2] Start - The item is aligned at the top of the row
[3] Center - The item centers itself vertically
[4] End - The item is at the bottom of the row.
The items in the widget above are set to align "auto" since they have a border and unequal amounts of text. This setting keeps all the grid items uniform.