ThemeKit Blog/News Grid

The responsive grid can have up to 365 items for a whole year's worth of blog posts and/or news items with heading, image and alt text, optional span for dat/ price text and a full width CTA (call to action) style link with hover animation.
Layout
The CSS Grid layout applies the auto and minmax keywords to automatically reduce the number of columns when the browser/device screen width decreases without using media queries.
The number of items per rowcan be adjusted using the minimum width control. The default is 360px.
Note that one media query is included to set the min-width for the smallest mobile phone. The default is 300px.
The hrid has controls for grid gap, padding and for the background color and its opacity. The wrapper has controls for setting horizontal and vertical spacing and for the background color and its opacity.
Main Heading
The optional main heading can be aligned left, center or right and has a control for adjusting its bottom padding when the value for grid padding is changed.
Links
The demo shows all the links with the same text - the international symbol for "read more". This is added by inserting the text content using an ::after selector.
This symbol can be created in HTML by enclosing an ellipsis in square brackets […] using this code […]
If individual link text is required, check the box and add the link text in the EverWeb widgets API Assets List.
If a directional arrow is required along with link text, insert it using an HTML arrow symbol → which is →
For more HTML symbols and their CSS equivalent follow the link below …