Chapter 16: Flexbox & Grid

Core Idea

One shared vocabulary of alignment utilities (justify-*, align-*/content-*/items-*/self-*, place-*) works across both flex and grid layouts, plus a set of flex-specific sizing utilities (basis/grow/shrink/flex) and grid-specific track/placement utilities (grid-cols-*, grid-rows-*, col-*, row-*, auto-cols-*, auto-rows-*, grid-flow-*).

Reference Tables

Flex container/item sizing

• flex-direction: flex-row, flex-row-reverse, flex-col, flex-col-reverse.
• flex-wrap: flex-nowrap, flex-wrap, flex-wrap-reverse.
• flex-basis: basis-<number> (spacing scale), basis-<fraction> (%), basis-full, basis-auto, basis-px, basis-3xs…basis-7xl (same --container-* scale as container queries), plus (<custom-property>)/[<value>].
• flex-grow: grow (1), grow-<number>, grow-[<value>], grow-(<custom-property>).
• flex-shrink: shrink (1), shrink-<number>, shrink-[<value>], shrink-(<custom-property>).
• flex (shorthand): flex-<number> (e.g. flex-1), flex-<fraction>, flex-auto, flex-initial (0 auto), flex-none, (<custom-property>)/[<value>].

Grid tracks & placement

• grid-template-columns/grid-template-rows: grid-cols-<number>/grid-rows-<number> (equal repeat(n, minmax(0,1fr)) tracks), grid-cols-none/grid-rows-none, grid-cols-subgrid/grid-rows-subgrid (adopt the parent's tracks — the item must also grid-cols-*/row-span-* etc. to size correctly within them), [<value>]/(<custom-property>) for a fully custom track list.
• grid-column/grid-row (placement + span): col-span-<number> (span n / span n), col-span-full (1 / -1), col-start-<number>/col-end-<number> (negatable for counting from the end), col-start-auto/col-end-auto, col-auto, col-<number> shorthand — same pattern mirrored for row-*.
• grid-auto-columns/grid-auto-rows (sizing implicitly-created tracks): auto-cols-auto/auto-rows-auto, -min/-max (min/max-content), -fr (minmax(0,1fr)), -<number> (spacing scale), [<value>]/(<custom-property>).
• grid-auto-flow: grid-flow-row, grid-flow-col, grid-flow-dense, grid-flow-row-dense, grid-flow-col-dense.
• gap: gap-<number>/gap-px/(<custom-property>)/[<value>], plus independent gap-x-* (column-gap) and gap-y-* (row-gap).

Alignment (shared across flex & grid)

Property	Utility prefix	Notable values
justify-content (main axis)	justify-*	start, end(+-safe), center(+-safe), between, around, evenly, stretch, baseline, normal
justify-items (grid, inline axis)	justify-items-*	start, end(+-safe), center(+-safe), stretch, normal
justify-self (grid item)	justify-self-*	auto, start, center(+-safe), end(+-safe), stretch
align-content (cross axis, multi-line)	content-*	normal, center, start, end, between, around, evenly, baseline, stretch
align-items (cross axis)	items-*	start, end(+-safe), center(+-safe), baseline, baseline-last, stretch
align-self (flex/grid item)	self-*	auto, start, end(+-safe), center(+-safe), stretch, baseline, baseline-last
place-content (both axes, container)	place-content-*	center(+-safe), start, end(+-safe), between, around, evenly, baseline, stretch
place-items (both axes, container)	place-items-*	start, end(+-safe), center(+-safe), baseline, stretch
place-self (both axes, item)	place-self-*	auto, start, end(+-safe), center(+-safe), stretch

• -safe suffix: adds the CSS safe keyword (safe center, safe flex-end) — falls back to start alignment instead of clipping content when there isn't enough space, an accessibility-minded default for centered/end-aligned content that might overflow.

Order

• order: order-<number>, -order-<number> (negative), order-first (-9999), order-last (9999), order-(<custom-property>), order-[<value>] — changes visual/tab order independent of DOM order.

Code Examples

<nav class="flex items-center justify-between gap-4">
  <div>Logo</div>
  <div class="flex gap-4">Links</div>
</nav>


<div class="grid grid-cols-4 gap-4">
  <div class="col-span-3 grid grid-cols-subgrid gap-4">
    <div class="col-start-2">aligned to parent's 2nd column</div>
  </div>
</div>

• What it demonstrates: items-center justify-between for the ubiquitous navbar pattern, and grid-cols-subgrid for a nested grid that shares its parent's column tracks.

Key Takeaways

1. justify-* is always main-axis, items-*/content-* are always cross-axis in flexbox — in grid, justify-* is inline-axis and align-* is block-axis; place-* sets both at once.
2. Use flex-<number> (the shorthand) for the common "grow and shrink, ignore basis" case; reach for grow/shrink/basis individually only when you need to decouple them.
3. grid-cols-subgrid/grid-rows-subgrid is the tool for nested grids that must align to an ancestor's tracks — a plain nested grid starts its own independent track list.
4. Prefer the -safe alignment variants for centered/end-aligned content whose size is unpredictable, to avoid it clipping off-screen with no scroll access.

Connects To

• Layout: display: flex/grid (the flex/grid utilities) is the entry point covered there.
• Spacing: gap-* sits alongside margin/padding conceptually but is grid/flex-specific.
• Sizing: basis-*/auto-cols-*/auto-rows-* share the same --container-* and spacing-scale values as width/height utilities.