Flexbox vs Grid: When to Use Which (With a Simple Rule)

The short answer: use Flexbox for one dimension — a row or a column, where content size drives the layout (navbars, button groups, toolbars). Use Grid for two dimensions — rows and columns together, where you define the structure up front (page layouts, card galleries, dashboards). One-axis distribution? Flex. Two-axis structure? Grid. And in a real app you use both: Grid lays out the page, Flexbox arranges what's inside each region.

Flexbox vs Grid is the CSS question that still trips people up years after both shipped, usually because they're taught as competitors. They're not — they solve different shapes of problem. Here's the rule that makes the choice instant, plus the handful of cases where it genuinely matters.

The one-line rule

Flexbox is one-dimensional. Grid is two-dimensional.

• Flexbox lays things out along a single axis — a row or a column — and is brilliant at distributing space along that axis (space-between, centering, growing/shrinking to fit).
• Grid lays things out in rows and columns at the same time, and is brilliant at defining structure — "three equal columns, a sidebar and a main area, this many tracks."

If you're arranging items in a line and letting their content decide the sizing, that's Flexbox. If you're placing items into a defined scaffold of rows and columns, that's Grid.

Where each clearly wins

Reach for Flexbox when:

• The layout is a single row or column (navbars, toolbars, button groups, tag lists).
• Item sizes should be driven by their content, with the leftover space distributed (flex-grow/flex-shrink).
• You're centering one thing, or spacing a handful of siblings.

Reach for Grid when:

• You need alignment across both axes — items lining up in columns and rows (card galleries, image grids, dashboards).
• The structure is known up front and content flows into it.
• You want responsive columns with no media queries: grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) reflows a card grid automatically as the viewport changes.

The answer is usually "both"

The framing that makes everything easier: these aren't either/or at the page level. The pattern I use on nearly every layout is Grid on the outside, Flexbox on the inside.

Grid defines the page regions — header, sidebar, main, footer. Then inside the header, Flexbox arranges the logo and nav. Inside each card in a Grid gallery, Flexbox stacks the title, body, and a button pushed to the bottom. You're not choosing one tool for the whole app; you're choosing the right tool per region, and they nest cleanly.

A couple of gotchas

• gap works in both now. You no longer need margin hacks to space Flex items — gap is supported in Flexbox too, so reach for it in either.
• Grid is better at overlap. If you need two elements to occupy the same cell (a label over an image, say), Grid handles it with grid-area far more cleanly than absolute positioning.
• Don't force Grid into a single line. A one-row button group in Grid is fighting the tool — that's Flexbox's whole job.

The takeaway

Stop treating it as a rivalry. Ask one question — am I arranging along one axis (Flex) or structuring two (Grid)? — and the choice makes itself. Then let them nest: Grid for the skeleton, Flex for the muscles. Once this clicks, a whole category of layout CSS gets boring in the best way — which is roughly the same relief I wrote about in the CSS I stopped writing once Flexbox and Grid clicked.