Flexbox & Grid Layout

Why layout modules exist. Before Flexbox and Grid, developers centered boxes and built columns with float, display: inline-block, table hacks, and absolute positioning — fragile techniques that fought the browser. Flexbox (2015) and Grid (2017) are purpose-built layout engines. The rule of thumb: Flexbox for one dimension (a row or a column), Grid for two dimensions (rows and columns at once). They aren't rivals — you nest them constantly: Grid for the page shell, Flexbox inside each region.

Flexbox: the container/item model. You turn an element into a flex container with display: flex. Its direct children automatically become flex items and lay out along a single axis. Nothing else needs display — the magic is on the parent. Everything in Flexbox is described in terms of two axes, so get those straight first.

The two axes (the key mental model). The main axis is the direction items flow, set by flex-direction (default row = left→right). The cross axis is perpendicular to it. justify-content aligns items along the main axis; align-items aligns them along the cross axis. Flip flex-direction to column and the axes swap — main becomes vertical — which trips up beginners constantly. When alignment 'goes the wrong way,' check which axis is which.

Container properties (set on the parent). flex-direction (row | row-reverse | column | column-reverse) — the main axis. flex-wrap (nowrap | wrap) — whether items overflow or wrap to new lines; flex-flow is shorthand for both. justify-content (flex-start | center | flex-end | space-between | space-around | space-evenly) — main-axis distribution. align-items (stretch | flex-start | center | flex-end | baseline) — cross-axis alignment of each line. align-content — spacing between wrapped lines (only matters with multiple lines). gap — space between items (use this, not margins).

Item properties (set on the children). flex-grow (how much a spare space an item soaks up; default 0 = don't grow). flex-shrink (how readily it shrinks below its base size; default 1). flex-basis (the item's starting size before grow/shrink — auto uses its content/width). The shorthand flex: <grow> <shrink> <basis> bundles all three: flex: 1 means 1 1 0 (grow equally from zero — equal-width columns); flex: 0 0 240px means a fixed 240px sidebar that never grows or shrinks. align-self overrides align-items for one item; order reorders items visually without touching the HTML.

Centering — the thing everyone Googles. Perfectly centering a box is now three lines: display: flex; justify-content: center; align-items: center;. That centers on both axes regardless of the child's size. This single pattern replaced a decade of margin: auto / transform: translate(-50%,-50%) tricks.

CSS Grid: two dimensions at once. display: grid makes a grid container; you then define tracks (columns and rows) with grid-template-columns and grid-template-rows. Between tracks are grid lines (numbered from 1). Items are placed into cells, or span multiple cells to form an area. Unlike Flexbox (content-driven, one axis), Grid is layout-driven: you define the structure up front and drop content into it.

Defining tracks & the fr unit. grid-template-columns: 200px 1fr 1fr makes a fixed 200px column then two flexible columns. fr means 'one fraction of the leftover space' — 1fr 1fr splits remaining space evenly; 2fr 1fr gives the first twice as much. repeat(3, 1fr) is shorthand for three equal columns. minmax(min, max) bounds a track: minmax(200px, 1fr) never shrinks below 200px but grows to fill. Use gap (or row-gap/column-gap) for gutters.

The responsive grid with no media queries. The famous one-liner: grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)). The browser fits as many 240px-min tracks as the container allows, then stretches them to fill — cards reflow from 4 columns to 1 as the screen narrows, with zero breakpoints. auto-fit is the sibling: identical, except it collapses empty tracks so the existing items stretch to fill the whole row. Use auto-fill to keep the grid slots, auto-fit to stretch content edge-to-edge.

Placing items: lines, span, and areas. Place an item by line number: grid-column: 1 / 3 (from line 1 to line 3 = spans 2 columns), or grid-column: span 2. For readable layouts, name regions with grid-template-areas: draw the layout as ASCII strings on the container, then assign each child a grid-area name. This makes a header/sidebar/main/footer shell self-documenting and trivial to rearrange at breakpoints.

Alignment in Grid. Grid has the same alignment vocabulary as Flexbox, doubled for two axes: justify-items/align-items align content within each cell (inline / block axis), and justify-content/align-content align the whole grid within the container when tracks don't fill it. place-items: center is the shorthand to center content in every cell.

Flexbox vs Grid — how to choose. Ask: do I control one axis or two? One row/column where item sizes flow from content (toolbar, tag list, button group, nav) → Flexbox. A defined 2D structure (page shell, dashboard, image gallery, form grid) → Grid. When in doubt: if you're writing flex-direction and thinking about a single line of items, it's Flex; if you're drawing rows and columns, it's Grid. Real apps use both — Grid outside, Flex inside cells.

Common gotchas. (1) Flex/Grid properties only affect direct children — a wrapper <div> breaks the relationship. (2) justify-content vs align-items confusion comes from forgetting the axis flips with flex-direction. (3) flex: 1 on items includes flex-basis: 0, so items size purely by grow ratio, ignoring content width — use flex: 1 1 auto to respect content. (4) A flex item with long content can overflow because its default min-width is auto; fix with min-width: 0. (5) gap in Flexbox is well-supported now — stop using margin hacks.

The mental model (memorise this). Flexbox = one axis, content-first, container sets direction + distribution, items grow/shrink/basis. Grid = two axes, layout-first, container defines tracks/areas, items placed onto lines. justify-* = main/inline axis, align-* = cross/block axis. gap for spacing everywhere. Reach for Grid to structure the page, Flexbox to arrange things within it.