Grid

The grid is create using the CSS Grid Layout Module and can acommodate up to 100 items.
The number of items per row can be set for each devices type and the grid padding and item spacing can be adjusted.
Normally this amount of content would slow the web page download time and make it totally unsuitable for use on mobile devices.
This widget makes the impossible doable by using a show more function along with lazy loading.
Show More
The number of items to load at page load can be set for computer and mobile. The mobile break point is selected from a drop down with options for tablet landscape, tablet portrait, phone landscape and phone portrait.
More items can be shown by clicking/tapping the centered button at the bottom of the grid.
The number of items to load per click is selectable above and below the break point.
Note: All the items can be displayed on the EverWeb design canvas while editing the content by setting the number of items to display to the number of items in the grid.
Lazy Loading Images
The images are lazy loaded so that, when the page is loaded in the browser, only the displayed images are actually downloaded. More images are downloaded each time the "Load More" button is clicked.
Items
Each item has an image, heading, optional date, text and a link. The date can have a contrasting color and there is a control for spacing the items vertically.
The grid items can have a border if required using the controls for border width, color and radius.
Links
To make life easy, the link text is enter only once using a CSS ::after pseudo element. Any text can be entered although the example on this page uses the internationally recognised symbol for "Read More …" which is three periods enclosed in square brackets.
The links have controls for font size, color, hover color, background color, border radius, letter spacing and font weight.
Images
Although the images are lazy loading, they should be cropped to no more than about 400px wide before importing into EverWeb. Those who are too lazy to reduce image sizes are punishing mobile device users by eating up their data allowance and draining their battery unecesarily.