Flexbox vs Grid
Flexbox vs Grid in CSS: one-dimensional flow vs two-dimensional layout, and how to tell which a design needs.
Last updated
The short answer
Flexbox lays out items along one axis — a row of buttons, a nav bar, centering something — letting content size drive the layout. Grid lays out two axes at once — a page skeleton, a card gallery — for when you want to define rows and columns first and place content into them.
| Dimension | Flexbox | Grid |
|---|---|---|
| Dimensions | One axis at a time (row or column) | Two axes at once (rows and columns) |
| Sizing driven by | Content size, by default | Explicit track definitions |
| Item placement | Flows in source order | Can place items anywhere, out of order |
| Overlap | Not really possible | Items can overlap by design |
| Typical use | Nav bars, button groups, centering | Page layouts, card grids, dashboards |
Choose Flexbox when
- →You're arranging items in a single row or column — a toolbar, a nav menu, a list of tags that should wrap.
- →You want content's natural size to drive the layout, with flex-grow/shrink handling the leftover space.
- →You need to center something vertically and horizontally without a hack — Flexbox does this natively.
Choose Grid when
- →You're laying out a page skeleton — header, sidebar, main content, footer — as rows and columns at once.
- →You want to define the structure explicitly (grid-template-columns/rows) and place items into named areas.
- →Items need to span multiple rows or columns, or overlap — things Flexbox has no clean way to express.
The catch nobody mentions
They aren't competing for the same job as often as the framing suggests — you can nest Flexbox inside Grid (and vice versa), and most non-trivial layouts do exactly that: Grid for the page's overall structure, Flexbox for aligning items within each grid cell. Treating this as an either/or choice for an entire layout usually means picking the wrong tool for at least one part of it.