Flexbox vs Grid: which one, when

Flexbox or grid is the most-asked question in CSS layout, and it has an actual answer — not a taste preference, a structural rule you can apply in five seconds. This guide states the rule, shows where each system genuinely wins, and ends with the two patterns that cover most layout work. Both systems have live playgrounds here — flexbox and grid — where every claim below can be poked at.

The one-dimension rule

Flexbox lays content out along one axis; grid places content in two. That is the whole rule. A flex container is a row (or a column) — items sit on that one line, and even with wrapping, each wrapped line is its own independent row that knows nothing about the rows above it. A grid is a lattice: rows and columns exist together, and everything placed in the grid aligns to both. So the five-second test: does this layout need things to line up in two directions at once? Grid. Is it a run of items along one line? Flexbox.

A second lens gives the same answer from the other side: flexbox works content-out (items' natural sizes push outward and the container distributes what's left), grid works layout-in (you define tracks first and content is placed into them). Ask whether the design is driven by the content or by the scaffold.

Where flexbox wins

Flexbox is the tool for components — the small, one-line arrangements interfaces are made of: navbars, toolbars, button rows, an icon beside a label, a card's footer pushing actions to opposite ends. Its superpowers are content-awareness and distribution: justify-content spreads whatever happens to fit, align-items centres things vertically without hacks, and flex: 1 lets one item drink all the leftover space — the classic search-bar-between-buttons pattern. Space-between, gap, and auto margins handle the "logo left, links right" layout in three lines. Flip through every one of those properties live in the flexbox playground — watching align-items change in real time teaches more than any diagram.

Where grid wins

Grid is the tool for layouts — the page-level scaffold where regions must align in both directions: sidebar plus header plus content, image galleries, dashboards, card grids where every row's cards match heights, forms with aligned label and input columns. Its superpowers are the fr unit (proportional tracks: 250px 1fr is the entire sidebar layout), repeat(auto-fill, minmax(220px, 1fr)) (a responsive card grid with zero media queries), and explicit placement — an element can be told to span rows 1–3 and columns 2–4, something flexbox cannot express at all. Build tracks visually in the grid generator and copy the CSS out; the holy-grail and sidebar presets there are the two page skeletons that launched a thousand tutorials.

They're teammates, not rivals

The framing of "versus" misleads: real pages nest one inside the other, constantly. The standard architecture is grid for the macro, flexbox for the micro — a grid defines the page's regions, and inside each region, flex containers arrange the components: the header cell is a flex row (logo, nav, actions), each card in the grid is a flex column (image, title, spacer, footer). Browser support is a non-issue for both (universal since roughly 2017), and gap, which began as a grid property, now works in flexbox everywhere too. The other tools in this corner — gradients, shadows, and easing curves — dress the layout once it stands.

Two patterns worth memorising

If you memorise nothing else, take these. Centre anything (the question that haunted CSS for 15 years): display: flex; justify-content: center; align-items: center; on the parent — three lines, done, and the playground will prove it. Responsive card grid with no media queries: display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; — cards fill the row, wrap when they'd shrink below 220px, and stretch to share space evenly, at every screen width. Between those two snippets and the one-dimension rule, you can lay out most of the web; Hex colour codes, explained and Social media image sizes and aspect ratios cover what goes inside the boxes.