EverWeb Widgets

CSS Grid - Text In An Image Grid

The grid can have any number of images - in this case 12. The number of columns is set to 4 on computers, 2 on tablets and 1 on phones.
The text spans two columns and two rows and can be placed anywhere in the grid by defining its column and row position/span using the short form.
.text {
grid-row:row-start / row-end;
grid-column:col-start / col-end
self-align:center
}The text can be self align vertically - in this case it is centered. The other options are start, auto and end.
If viewing this page on a computer, reduce the browser width slowly to see how the grid responds to changes in width.

Image [1]
Caption [1]
Image [2]
Caption [2]
Image [3]
Caption [3]
Image [4]
Caption [4]
Caption [5]
Caption [5]
Caption [6]
Caption [6]
Caption [7]
Caption [7]
Caption [8]
Caption [8]
Caption [8]
Caption [8]
Caption [10]
Caption [10]
Caption [11]
Caption [11]
Caption [12]
Caption [12]

Alternative Text Block Position & Grid Styles

CSS Grid - Example [2]

To show how the text can be moved to any position in the grid, this example has the text block set to column 1/3 and row 1/3.
It is also set to row 1/3 on both tablet and phone so that the text appears above all the images.
The self-align property is set to "start" so that this text is aligned at the top its container rather than in the center like the example above.
The grid images are inserted in an HTML5 figure element so that they can have both alt text and a caption which can be indexed by the search engines.
The grid image captions are optional.
Image links can be turned on globally and can be configured to open internal pages with a relative URL and external pages with an absolute one.
The links can open in a new window if required.

Image [1]
Caption [1]
Image [2]
Caption [2]
Image [3]
Caption [3]
Image [4]
Caption [4]
Caption [5]
Caption [5]
Caption [6]
Caption [6]
Caption [7]
Caption [7]
Caption [8]
Caption [8]
Caption [8]
Caption [8]
Caption [10]
Caption [10]
Caption [11]
Caption [11]
Caption [12]
Caption [12]

© EverWeb Widgets -