Grid Items

The responsive grid layout allows for up to 48 items. The number of items per row can be adjusted for each device type - computer, tablet landscape, tablet portrait and mobile phone.
The grid row gap, column gap and padding are all adjustable and the grid items can have a contrasting background.
The h1 heading above the grid items is optional.
Images
The image size should be kept down if there are going to be a lot of them. The images in this example are about 300px square.
The images have an alt text attribute and the caption below is contained in an HTML5 figcaption since each grid item is a <figure>. This means that the search engines will relate the keywords in both the alt text and the ficaption as realting to the image.
The image has options for adding a border radius and a box shadow. In this case, the images are created round by checking a box.
The images can have a scale animation on hover when viewed on computers if required.
Text
Since this a CSS Grid Layout, even although each item has a varying number of lines of text, the height is automatically equalised without the need to resort to Javascript.
Links
The link tabs are 32px which is the minimum size recommended for user inouts on touch devices. The background color and its opacity can be adjusted as can the icon color and its hover color.
The links can be configured with either a relative or an absolute file path to create internal or external links and can open in a new window if required.
Container
As with most of the responsive grid layout widgets, the info grid is centered within a wrapper with a maximum width setting.
The wrapper itself can be given a solid or transparent color depending on whether it is being used as a scroll over item - or not.
The container has a control for adjusting its spacing in relation to the items above and below it.