Grid Block Grids
These grids use the CSS "grid" implementation. This should be used (mostly) when the number of items is stable and fills each row completely.
Classes go from one-up to seven-up, and define the number of columns on each row. This initial declaration affects all screen sizes. To choose a different layout for a particular screen size, you must add another classes, e.g. one-up-sm, which will make a single column layout on phones. Sizing suffixes are -sm (small), -md (medium e.g. iPad portrait), -lg (large, e.g. iPad landscape), and -xl (extra-large, e.g. many laptops).
Unlike traditional floats and flexbox grids, here we define the size of the gutter between the elements, and the elements size accordingly. This is done using the "gap-" set of classes that go from gap-1 (.25rem, or usually 4px) to gap-20 (5rem, or usually 80px). All the examples below use gap-4 (1rem, or usually 16px). Custom gap can be used by leaving out the gap class and adding the gap value to the CSS file.
Some elements put in block grids have bottom margins, e.g. images and leadins. By default, these are removed ("compacted") to make the vertical spacing more consistent. Use the "no-compact" class to keep those margins
Two Up
grid-block-grid two-up gap-4
Three Up
grid-block-grid three-up gap-4
Three Up, One Up Small
grid-block-grid three-up one-up-sm gap-4
Three Up, Multiple Rows
grid-block-grid three-up gap-4
Three Up, Multiple Rows, Not Compact
grid-block-grid no-compact three-up gap-4
Three Up, One Orphan
grid-block-grid three-up gap-4
Three Up, Two Orphans
Unlike flexbox, grid keeps adding elements in the next space and doesn't space them out to the edges.
grid-block-grid three-up gap-4
Four Up, Two Up Small
grid-block-grid four-up two-up-sm gap-4
Auto-filled Grid
We can also set the grid to display items with a minimum width and then have it fill out the space accordingly. Specifying layout for screen sizes is not necessary. This is done via the fill-x class, where x is a number between 150 and 500 in increments of 50.
Auto-fill 200
grid-block-grid fill-200 gap-4
Auto-fill 400
grid-block-grid fill-400 gap-4
Auto-fit Grid
Auto-fit grids are much like auto-fill grids: We set the grid to display items with a minimum width and then have it fill out the space accordingly. Specifying layout for screen sizes is not necessary. This is done via the fit-x class, where x is a number between 150 and 500 in increments of 50.
In many (most?) cases auto-fill and auto-fit will produce the same result, but at some screen sizes there will be difference, depending on the number of items and the sizes of those items.
Auto-fit 200
grid-block-grid fit-200 gap-4
Auto-fit 400
grid-block-grid fit-400 gap-4