CSS
Auto GridA 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
Info
Spacing
Grid GapItems 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 varying content.
Horizontal Align
Grid items are aligned horizontally using the justify-items property.
Flexbox
Flex v GridGrid is a lot more versatile than flex but there are situations where it can be combined with grid.
Link Position
The links are positioned at the bottom 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 images with alt text, a heading, an optional span, text and an optional link It can have up to 48 items.
The grid 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.