EverWeb Widgets

CSS Grid Stack 3 Column Rows

3 Column Row

At wide browser settings, the columns are inline. Each requires a width. A column width can be a fixed number of pixels or one fractional unit. At least one column must have a width of "1fr"
At the break point all the columns have a width of 1 fractional unit. The first two items remain in row one and the last item switches to row 2.
On mobile phones in portrait mode, all three columns occupy a row of their own.
The columns have controls for adding padding, border width, color and radius and for adjusting the grid gap.

Image - Text - Text

The image in the first column has an alt text attribute for keywords for the search engines and, in this example, a fixed width of 320px.
The image should be cropped to the maximum width that it will appear in the browser. This is equal to the break point ÷ 2 which, in this case is about 530px.
Center Item
This has a heading with an alignment control and a text block. The font can be web safe or non websafe or Google hosted with a web safe fallback.
There are controls for the heading and text font size, text align, line height and the vertical spacing of the items.
Right Item
This has a heading, text and an optional CTA style link tab which can be configured to open internal or external page and in a new window if required.
Span
Spans can be inserted and there are controls for adjusting the font size and color. Folow the link below to find out how to insert spans.

3 Images

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 "center" and the items in the widget below are set to align "start".
If viewing this page on a computer adjust the browser width to see how this works.

3 Column Grid Row

The left image and text block have a fixed width when viewed on wider browser settings. The right hand column has a width of one fractional unit so that it is responsive.
All three columns are vertically aligned in the center. The other options are start, end and auto.
Links
Either or both images can be hyperlinks to internal or external pages. The link appears as an arrow icon at the top right and has controls for setting the icon color and hover color.

Styled List

The list has options for list style type, font size and item spacing.

The list can have up to 24 items
The list items inherit the widget's font family and color settings
There are controls for font size, item spacing, line height and list item inset
The list style types available to choose from are …
disc. circle, square, none, decimal, decimal-leading-zero, lower-alpha andupper-alpha
The list style position is set to "outside"

CSS Grid Column Layout

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 width of 320px and 360px and the third one is responsive with a width of one fractional unit.
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.
At the next break point - for mobile phones - the number of columns is 1 and each item is placed in a different row.
The row items are set to align vertically in the center.

Home Page