Flexbox Block Grids
These grids use a flexbox implementation. This should be used instead of the "block-grid" declaration since flexbox as a layout engine offers a lot more power and flexibility.
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).
Spaced Grids
Space between is the default. It sets the individual boxes at slightly less than their full fractional width (e.g. three-up boxes are all 30.5%) and spaces them out, creating the gaps between items on the same row.
Two Up
flex-block-grid two-up
Three Up
flex-block-grid three-up
Three Up, One Up Small
flex-block-grid three-up one-up-sm
Four Up
flex-block-grid four-up
Managing Orphans
Because of the way the individual boxes are spaced, you can have some odd results when you have orphan boxes. You can usually "fix" that by using the centered version (see below) or the grid version, depending on the look you want.
Three Up, Full Rows
flex-block-grid three-up
Three Up, One Orphan
flex-block-grid three-up
Three Up, Two Orphans
flex-block-grid three-up
Centered
Centering sets the individual boxes at slightly less than their full fractional width (e.g. three-up boxes are all 30.5%) and uses margins or CSS gaps to create space between them. The grid goes full-width. The same column and sizing classes are available as for spaced layouts.
To make a spaced flex-block-grid into the centered version, add the class justify-center.
Centering is only usefull when you have to deal with orphans boxes. Otherwise, spaced grids are simpler and easier to work with.
Margins are used in older browsers (including some relatively recent versions of Safari) that don't support "gap" for flexbox. This means that the grid won't go quite full-width in some cases, although it will be only a matter of a pixel or two depending on the -up.
Three Up, One Orphan
flex-block-grid justify-center three-up
Three Up, Two Orphans
flex-block-grid justify-center three-up