Ask five front-end developers when to use Flexbox and when to use Grid and you will get five slightly different answers. The Flexbox vs Grid question feels harder than it should, mostly because both can technically build the same layouts. But they were designed for different jobs, and once you internalize the difference, choosing takes about two seconds.
The one-dimensional vs two-dimensional rule
Here is the mental model that settles most arguments: Flexbox is one-dimensional, Grid is two-dimensional.
Flexbox lays things out along a single axis — a row or a column. It is brilliant at distributing items in one direction and letting them flex to fill or share space. Grid works in two axes at once — rows and columns together — so it excels at overall page structure where you care about alignment both across and down.
When Flexbox is the right tool
Reach for Flexbox for components that live along a line: a navigation bar, a row of buttons, a card’s header with a title on the left and an icon on the right, or centering a single element. This is the everyday “space these items out nicely” job.
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
}That handful of properties gives you a header that spaces its contents and vertically centers them — the kind of thing that used to take ugly hacks.
When Grid is the right tool
Reach for Grid when you are placing things in two directions at once: a page skeleton with a header, sidebar, main area, and footer, or an image gallery that should stay aligned in both rows and columns.
.layout {
display: grid;
grid-template-columns: 200px 1fr;
grid-template-rows: auto 1fr auto;
}Trying to force that same structure with nested Flexbox containers works, but you end up with wrapper soup. Grid expresses it directly.
They are teammates, not rivals
The framing of Flexbox vs Grid as a competition is misleading. Real layouts use both: Grid for the big-picture page regions, Flexbox for the content inside each region. A card grid might use Grid to place the cards and Flexbox inside each card to align the avatar and text. Reaching for both in the same layout is a sign you understand them, not a sign of indecision.
The wrapping gotcha: flex-wrap is not a grid
Here’s where the “one-dimensional” rule confuses people: Flexbox can wrap onto multiple lines with flex-wrap: wrap, which looks two-dimensional. The crucial difference is that each wrapped line is independent — items on row two don’t align with items on row one. Give a card six items where one has a longer title, and the columns drift out of alignment. That’s not a bug; it’s the design. Flexbox rows don’t know about each other.
Grid rows and columns do know about each other — that’s the whole point. So the refined rule: if wrapped items must line up in tidy columns, you wanted Grid all along. If each row can flow independently (tags, chips, a toolbar that wraps gracefully on mobile), wrapping Flexbox is exactly right.
The modern gallery in three lines
The single most useful Grid pattern to memorize is the auto-responsive gallery — no media queries required:
.gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 1rem;
}Read it as: “make as many columns as fit, each at least 250px, sharing leftover space equally.” Shrink the viewport and columns drop out automatically; widen it and they return. This one rule replaces the old breakpoint-per-screen-size dance for card layouts, image grids, and product listings — and gap (which works in both Grid and Flexbox now) replaces the margin hacks we all used to fight. The cousin keyword auto-fit behaves identically except it stretches the columns you have when there aren’t enough items to fill the row — try both in a live page and the difference clicks immediately.
Centering, finally settled
Since “how do I center a div” remains the eternal question, here are the modern answers. For centering one thing inside a container, Grid is the shortest incantation ever:
.parent {
display: grid;
place-items: center; /* horizontal AND vertical, one line */
}Flexbox does it in two (justify-content: center; align-items: center;) and is equally correct. Either way, the dark ages of negative margins, absolute positioning with transforms, and table-cell hacks are over. If you’re still typing those, this is your permission slip to stop.
What about older browsers?
The short answer: this stopped being a real concern. Flexbox and Grid have both shipped in every major browser for years — Grid landed everywhere back in 2017 — and support now sits comfortably above 97% of global traffic. Unless you maintain software for locked-down enterprise environments running fossilized browsers, you can use both freely, including gap, minmax(), and auto-fill. The features worth checking before using are the newest arrivals like subgrid (which lets nested grids share the parent’s tracks — now also widely supported) — a quick glance at caniuse.com settles any doubt in ten seconds.
Frequently asked questions
Is Grid harder to learn than Flexbox? Grid has more concepts (tracks, lines, areas, explicit vs implicit grids), so the surface is bigger — but for the common cases you need about three properties, as the gallery above shows. Learn Flexbox thoroughly and Grid’s everyday 20%, and you’ll cover essentially all real layouts.
Should I still use CSS frameworks for layout? The layout half of old frameworks (the 12-column grid systems) is genuinely obsolete — native Grid does it better with less markup. Utility frameworks like Tailwind still have their place, but note they’re generating Flexbox and Grid under the hood; knowing the real properties makes you better at using them.
Does using Grid or Flexbox affect performance? Nothing you’ll ever measure on a normal page. Layout choice matters for maintainability and correctness; performance differences between the two are noise compared to images, JavaScript, and fonts. Pick by fit, not by micro-benchmarks.
The quick decision
Before you start a layout, ask one question: am I arranging things in a line, or in a grid of rows and columns? Line means Flexbox. Rows-and-columns means Grid. That single question resolves the vast majority of real cases faster than any flowchart.
