![Auto Grid Blog Post List]()
Auto Grid Blog Post List
Latest Post
This is an example of a responsive grid using the relatively new CSS Grid Layout Module. This allows the creation of fairly complicated grid items with very little code and no javascript.
The responsive grid is centered in the browser, has a maximum width setting and can contain up to 48 items.
The latest post is featured by increasing its size in relation to the other items. This achieved by allowing it to span more than one column and row at certain browser/device screen widths using media queries.
Up to 49 items can be added using the EverWeb Widget API Assets List.
The latest post is added to the bottom of the Assets List and then dragged to the top.
The order of the entries can be changed by dragging the image file name in the Assets List.
![Grid Item]()
Grid Item
April 10th 2019
Each grid item is an HTML5 article element with an image, heading, optional date/price, text and a CTA style link.
![Items Per Row]()
Items Per Row
April 9th 2019
The number of items per row is specified for each device type - computer, tablet landscape, tablet portrait and mobile phone.
![Article]()
Article
April 7th 2019
Each grid item is an HTML5 article element with a heading, text and an optional CTA style link.
![Link]()
Link
April 5th 2019
The link can be configured to open internal or external pages and files and in a new window if required.
![Link Position]()
Link Position
April 2nd 2019
The link is absolutely positioned at the bottom of the container so that all the links line up in any row even when the amount of content varies.
![Item Spzcing]()
Item Spacing
March 28th 2019
Using the CSS grid layout module, item spacing is easily set using the "grid-gap" selector.
![X & Y Spacing]()
X & Y Spacing
March 18th 2019
Items can be spaced on the x-axis using the "grid-column-gap" selector and on the y-axis using the "grid-row-gap" selector.
![Lazy Loading]()
Lazy Loading
March 12th 2019
The item can accommodate up to 49 items.
Images are lazy loaded as the page scrolls to give a faster page download time.
