Auto Grid
InfoA grid layout using the min-max function and the auto-fill keyword to create a responsive grid without using media queries.
Span [2]EverWeb Widgets
ThemeKit Content Auto Grid
Content Grid
Grid Gap
SpacingItems 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
Align PropertyGrid 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.
Penta Grid …Horizontal Align
JustifyGrid 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.
Link Position
The links are positioned at the bottom of the grid item very simply by using flex and auto margins.
Auto Text 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!
Text Grid
Each grid item has a heading, an optional span, text, another optional span and an optional link. It can hold 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.
Spans
There are two optional spans for items like dated price and so on. Each span has controls for font size, color and text align.