Grid

Set span on each Col to divide a row of 24 columns, like two halves of 12, three thirds of 8 or four quarters of 6.

Set gutter on a Row to space its columns, as a number of pixels like 16 or a CSS length like "2rem".

Pass gutter an object keyed by breakpoint to widen the spacing on larger screens, from 8 on a phone to 32 from lg.

Pass gutter a [horizontal, vertical] pair, like [16, 24], to space the rows a Row wraps onto as well as its columns.

Pick a gutter and a column count to see gutter and span together, where N equal columns each take span={24 / N}.

Set offset to move a column right by a number of columns, like span={12} offset={6} to center a half-width column.

Set push and pull to swap where two columns appear without changing the markup, like a sidebar that comes second in code but shows first.

Set order on each Col to change the order the columns appear in, here the reverse of the order they are written in.

Set justify to spread columns along the row: start, center, end, space-between, space-around and space-evenly, top to bottom.

Set align to line up columns of different heights at the top, middle or bottom of the row, or stretch them to the tallest one.

Set flex on a Col to size it by ratio, like 2 and 3, or by a CSS flex value, like a "0 0 12rem" sidebar beside an "auto" column.

Set a span per breakpoint, from xs={24} up to xl={4}, so the columns go from one per row on a phone to four across on a desktop.

Pass a breakpoint an object, like lg={{ span: 6, offset: 2 }}, to set span, offset, order, push, pull or flex for that step.

Set flex inside a breakpoint object to size columns by percent, like lg={{ flex: "20%" }} for five across on a desktop.

Call useBreakpoint to read which breakpoints match in JavaScript, for choices CSS cannot make, like how many items to load.