EverWeb Widgets

RGL Stack 3 Images

CSS Grid 3 Column Image Row

Grid Column Fractional Units

With CSS Grid Layout, there's a flexible unit - "fr". Fr is a fractional unit so an item with a width of 1fr takes up 1 part of the available space.
This widget has three columns and the default setting is 1fr for each column. Three images with different aspect ratios are inserted. If the width of each was 1 fractional unit, the layout would look like the example below.
In the item above, the square image and the portrait image are each inserted in a column which is 1fr. The landscape image column is 1.5fr which creates a better balance.
In both examples, the images are vertically aligned in the center. They can also be aligned so that the images are aligned at the top or the bottom of the container as described further down this page.

Grid Item Spacing

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. In this case, the relevant values are …
[1] Start - The item is aligned at the top of the row
[2] Center - The item centers itself vertically
[3] End - The item is at the bottom of the row.

Images

Each image has an alt text attribute and an optional caption. The caption can use a web safe fon or a non web safe or Google hosted font with a web safe fallback. There are conrols for font size, color and background color and its opacity.
The captions can be displayed on page load or an hover when viewed on computers.
Links
Each image has the option of being configured as a hyperlink to open internal or external pages and in a new window if required.
On responsive pages, image links without some kind of indicator are pretty much useless since mobile device users don't see a hover cursor to indicate a link.
The link is actually the icon at the top right of the image, this is created using CSS and can appear on hover or on page load when viewed on computers.

CSS Grid 3 Column Text Row

Column A

The columns are created using the CSS Grid Layout Module. At the maximum width there are 3 columns and one row. The first two have a fixed widths of 320px and 400px and the third one is responsive with a width of one fractional unit.

More Columns

Column B

At the first break point - for tablets in landscape mode - there are two columns and two rows. Each column is one fractional unit so all the items become responsive.
The image is place in column one, row one and the list in column 2, row 1. The text block is placed in row 2, column 1 and set to span two columns.

Grid Widgets

Column C

At the next break point - for mobile phones - the number of columns is 1 and each item is placed in a different row.
The text items are auto aligned to keep them the same height despite varying content and the image is vertically aligned in the center.
NOTE: When viewed inline on computers, any column can have its width set in fractional units (fr) or pixels (px).
The columns in this example are set to "align-self:auto" which stretches them to fill the height of the container.

Home Page