Image & Text Grid

This widget is a simple example of "grid item placement" meaning placing any item in a specific place in the grid.
The grid consists of 3 columns and 2 rows when viewed on wider browser/screen widths. The images each occupy 1fr (fractional unit) and automatically place themselves in the order in which they were inserted.
Text Position
The text item spans 2 columns and is positioned by giving it specific column and row numbers at screen widths above the break point.
In the example above, the text is placed in column 1, row 2 and in the one below it is placed in column 2, row 1.
Break Point
In this example, the break point is set so that the layout changes on tablets in portrait mode. The grid is reduced to 2 columns so the pairs of images and the text block each ocupy a row. The position of the text can be specified by entering a row number. In the example above, the text is placed in row 1 below the break point and appears above the images.
In the example below, the text is placed in row 2 below the break point and inserts itself between the pairs of images.
Mobile Phone
On mobile phones in portrait mode, the number of columns is reduced to 1 so all the items stack. There is a control for setting the position of the text on these devices.
In the example above the text is positioned in row 1 so that it appears first and in the example below it is set to row 5 so that the text appears below all the images.
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.
Text
The text is vertically centered in its container and there is are controls for adjusting the vertical spacing of the items. and styling span tags.
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.
Images
The images in this example were cropped to about 400px wide before importing into EverWeb. The images can have a border if required as shown in the example below.