Image & Text Grid

This widget is an example of "grid item placement" meaning placing any item in a specific place in the grid.
The grid consists of 2 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 is also one fractional unit wide 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 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 1 column. 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.
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 600px wide before importing into EverWeb. The images can have a border if required as shown in the example.
Grid
The spacing between the items is asjusted using the Grid Gap control. The padding around the grid items can be adjusted as can the vertical spacing from the items above and below it.
Both the grid background and the wrapper backgound have controls for color and opacity.