Flexbox vs CSS Grid: Which Layout Should You Actually Use?

The short answer: one dimension vs two

Reach for Flexbox when you're laying out items along a single line — a row of nav links, a card's inner stack, a toolbar that wraps. Reach for CSS Grid when you need to control rows and columns at the same time — a page shell, an image gallery, a dashboard.

Flexbox is a one-dimensional layout system: it distributes space along one axis at a time (a row or a column). Grid is two-dimensional: it manages rows and columns together, so items line up in both directions without you nudging anything by hand.

That single distinction resolves most "which one?" arguments. Everything below is the detail that makes it stick — plus the cases where the two genuinely overlap, and how they work together in real layouts.

Flexbox vs Grid at a glance

Both ship in every modern browser and have for years. Neither is "newer" in any way that should affect your choice today — pick on fit, not fear.

The mental model that actually helps

The cleanest way to decide is to ask: is the content deciding the layout, or is the layout deciding the content?

• Flexbox is content-first. You drop items in and Flexbox distributes whatever space is left over. Items can grow, shrink, and wrap based on their own size. You rarely say "there are three columns" — you say "space these out evenly and let them wrap."
• Grid is layout-first. You define the structure — "three equal columns, a header row, a sidebar" — and then place content into it. The grid exists before the content arrives.

A navbar is content-first: you don't know how many links there are, you just want them in a row with space between. A magazine page is layout-first: the columns and regions are the whole point.

When to use Flexbox

Use Flexbox when your layout is essentially a line of things (that line may wrap onto multiple lines, but each line is handled one axis at a time):

• Navigation bars and menus
• Toolbars and button groups
• The inside of a card (image, then title, then a footer pushed to the bottom)
• Centering a single element
• Tag/chip lists that wrap
• Vertically distributing items in a sidebar

Flexbox shines at distributing leftover space and at pushing things apart. The classic "logo left, links right" navbar is three lines of CSS:

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

justify-content: space-between pins the first item to the start and the last to the end, spreading the rest. align-items: center handles vertical alignment on the cross axis. Add flex-wrap: wrap and the row gracefully breaks onto a second line when space runs out — no media query required.

Another Flexbox superpower is the "push to the end" trick inside a card:

.card {
  display: flex;
  flex-direction: column;
}

.card .cta {
  margin-top: auto; /* shoves the button to the bottom */
}

margin-top: auto eats all the free space above the element, pinning it to the bottom regardless of how much text sits above it. That's a genuinely hard thing to do cleanly without Flexbox.

When to use CSS Grid

Use Grid when you need rows and columns to relate to each other — when items should line up both across and down:

• Overall page layout (header, sidebar, main, footer)
• Image galleries and product grids
• Dashboards and card layouts with equal-height rows
• Any design where columns must stay aligned across rows
• Forms with label/field columns that line up
• Overlapping elements (a caption over an image, layered UI)

The signature Grid move is the responsive card grid with no media queries:

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
}

Read that middle line as: "make as many columns as fit, each at least 250px wide, sharing leftover space equally." On a phone you get one column; on a laptop, three or four — and the browser does the math. auto-fit collapses empty tracks so items stretch to fill the row; swap in auto-fill if you'd rather keep empty columns reserved.

For a full page shell, named areas make the structure readable at a glance:

.layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header  header"
    "sidebar main"
    "footer  footer";
  min-height: 100vh;
}

.layout header { grid-area: header; }
.layout .sidebar { grid-area: sidebar; }
.layout main   { grid-area: main; }
.layout footer { grid-area: footer; }

You can practically see the layout in the grid-template-areas string. Rearranging the page is a matter of editing that ASCII map — no reordering markup. Our step-by-step CSS Grid tutorial builds this pattern out into a full responsive page.

Head-to-head: the cases people actually argue about

Centering one thing

Both do it. Flexbox is the reflexive choice:

.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

Grid does it in fewer declarations with place-items:

.center {
  display: grid;
  place-items: center;
}

For a single centered element, Grid's place-items: center is the tersest option in CSS. For centering within a row of other flex items, stick with Flexbox.

Equal-height columns

If you want three columns that are all as tall as the tallest one, Grid does this for free — every item in a row shares the row's height by default. In Flexbox, align-items: stretch (the default) gives equal-height flex items along a single row too, so both handle the simple case. Grid wins the moment you have multiple rows that must also align.

Gaps between items

Both support the gap property today. It landed in Grid first and arrived in Flexbox later, but every current browser supports gap in Flexbox now. You no longer need negative-margin hacks in either system.

Wrapping vs reflowing

• Flexbox flex-wrap: wrap: items flow onto new lines, but each new line sizes independently — items in row two don't align with items in row one.
• Grid: items always snap to the same column tracks, so everything lines up in a strict matrix.

If you want a ragged, content-driven wrap, that's Flexbox. If you want a tidy grid, that's Grid. This is the single clearest tell for which tool a design wants.

They're not rivals — use both

Here's the part that resolves the whole debate: you almost never choose one for an entire site. Real layouts nest them.

A typical page uses Grid for the macro layout — the header/sidebar/main/footer skeleton — and Flexbox for the micro layout inside each region: the nav links in the header, the buttons in a card, the meta row under an article title.

/* Grid for the page shell */
.page {
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: 2rem;
}

/* Flexbox inside a single card */
.card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

A grid item can be a flex container, and a flex item can be a grid container. Nest as deep as the design needs. Learning both well — see our complete guide to Flexbox for every property — means you stop asking "which one?" and start asking "which one here?", region by region.

Quick decision cheat-sheet

A note on performance and support

There's no meaningful performance difference between the two for typical layouts — both are highly optimized native browser features, and neither will be your bottleneck. Choose on fit and readability, not speed.

On support: both Flexbox and Grid work in every browser people realistically use, with global support well above 98%. Grid was the later arrival historically, which is why some older tutorials treat it as risky — that caution is outdated. If you're targeting Internet Explorer 11 (rare in 2026), note it used an older, incomplete Grid syntax and a slightly buggy early Flexbox; for anything else, both are safe to ship. As always, check current support for any specific sub-feature before you rely on it.

The bottom line

Ask one question: is this layout a line, or a grid?

• A line of items — one axis, content-driven, may wrap → Flexbox.
• Rows and columns together — two axes, layout-driven, aligned → Grid.

Most pages want Grid for the overall structure and Flexbox for the components inside it. You're not picking a side for life; you're picking the right tool for each box. Once that clicks, layout stops being a fight. For the bigger picture on adapting these layouts across screen sizes, our responsive web design guide ties Flexbox, Grid, and media queries together.