Auto Grid
LayoutA grid layout using the min-max function and the auto-fill keyword to create a responsive grid without using media queries.
EverWeb Widgets
ThemeKit Content Auto Grid
Home
Grid Gap
Items in the grid can be spaced out evenly giving a value to the grid-gap property.
The grid-column-gap and grid-row gap properties can be used if the columns and rows need different spacing.
Vertical Align
Grid items are aligned vertically using the align-items property, The default value is "auto" which makes all the grid item heights equal despite verying content.
Horizontal Align
Grid items are aligned horizontally using the justify-items property.
Flexbox
Grid is a lot more versatile than flex but there are situations where it can be combined with grid.
Links
Flex & GridThe links are positioned at the botttom of the grid item very simply by using flex and auto margins.
Auto Grid
The CSS Grid Layout Module has made all these responsive grid layout like Bootstrap redundant. The module can create grids with just a few lines of CSS and no Javascript.
The auto grid is even more efficient in that it can change the number of items per row based on browser/device screen width without having to use media queries.
It's only necessary to set a minimum width for the grid items and, combined with the auto-fill keyword, everything just works!
Content Grid
The grid shown here has SVG icons, a heading, an optional span, text and an optional link.and can hold up to 48 items.
The grid items rows maintain equal height despite varying content and the links line up at the bottom.
Links
The links can open internal or external pages and have a new window option. They can be styled as standard links, CTA links with a solid background or CTA links with a border.
SVG Icons
The icons have controls for size, icon color, background color and opacity, border width, color and radius, padding and a checkbox to make the icons round.
Increasing the padding will reduce the relative size of the icon and vice versa.
Inserting SVG Icons
SVG (scaleable vector graphic) have much better quality and smaller file size then font icons like Fontawesome and PNG images. PNG images should be avoided on responsive pages.
To insert an icon …
Open the SVG folder in the ThemeKit Design download folder.
Double click the icon to open it in TextEdit.app
Copy the code Paste it into the widget settings
NOTE: When using TextEdit for code, make sure it is set for plain text mode.
Styling Links
Links in text should not be used for responsive pages as they are awkward for mobile touch devices users.
Any links relating to text content should be inserted below the text and styled like CTA (call to action) links for visibilty and ease of use.
Usefull Tip - Text liks can be styled like "Apple" links by inserting ❯ ❯ after them using the HTML symbol ❯