Flexbox vs Grid: When to Actually Use Which
Both do layout. One is for one-dimensional arrangement; the other is two-dimensional. Most confusion comes from using one where the other fits better.
Flexbox and Grid aren't competing solutions to the same problem — they're solving genuinely different layout problems, and most "which one do I use" confusion comes from not having a clear rule for which situation is which.
The actual dividing line
Flexbox lays items out along one axis — a row or a column — and is built for content-driven sizing: items that grow and shrink based on their own content and available space. Grid lays items out on both axes at once — rows AND columns together — and is built for layout-driven sizing: an explicit structure you define up front, that content gets placed into.
Flexbox — the right tool for
.nav { display: flex; justify-content: space-between; align-items: center; }
/* A navbar: items in a row, space distributed between them, vertically centered.
One-dimensional. Content-driven — the logo and the nav links each take
their own natural width. */A navbar, a button group, a card's internal content stack, anything where you're distributing or aligning items along one line.
Grid — the right tool for
.layout { display: grid; grid-template-columns: 240px 1fr; grid-template-rows: auto 1fr auto; }
/* A page shell: a fixed sidebar, a flexible main column, header and footer
rows. Two-dimensional and layout-driven — the structure is defined
explicitly, independent of what content ends up inside each cell. */A page-level layout with a sidebar, a photo gallery that needs to align both rows and columns, any layout where you're thinking in terms of a real, explicit grid structure rather than "items flowing in a line."
The honest rule
If you're arranging things in one direction and mostly asking "how much space does each item get," reach for Flexbox. If you're defining an actual two-dimensional structure and asking "what goes in this cell," reach for Grid. They compose together constantly in real layouts — a Grid page shell with Flexbox inside individual cells is a completely normal, common pattern, not a sign you picked wrong.