Flexbox vs CSS Grid: When to Use Which (with Real Examples)

Every front-end developer asks this question eventually: should I use Flexbox or CSS Grid? The short answer is 'both, often on the same page' — but knowing exactly when to reach for each one is what separates intermediate developers from senior ones.

The one-line rule

Use Flexbox when your layout is essentially a single row or column of items. Use Grid when you need to align items in two dimensions at the same time. That's the entire heuristic — everything else is detail.

When Flexbox shines

• Navigation bars with a logo on one side and links on the other
• Card footers that push a button to the bottom
• Pill groups, button toolbars, and tag lists
• Centering literally anything (display: flex; place-items: center)
• Any layout where item sizes are content-driven and order can shift

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

When CSS Grid is the right call

• Page-level layouts (header / sidebar / main / footer)
• Image galleries and masonry-style grids
• Dashboard widgets with explicit columns and rows
• Magazine layouts with overlapping or spanning items
• Any layout where you want to declare the shape first, then drop children in

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

Using both together

The most maintainable real-world layouts use Grid for the page skeleton and Flexbox inside each grid cell. Grid handles the big picture; Flexbox handles the row of buttons inside a card. Trying to do everything with one or the other usually results in fragile CSS.

Performance and browser support

Both layouts are fully supported in every modern browser (including all evergreen mobile browsers since 2018). Performance is essentially identical for typical pages. Choose based on intent, not on performance fears.

Cheat sheet

1. One axis? Flexbox.
2. Two axes? Grid.
3. Need to align items relative to each other? Flexbox.
4. Need to align items relative to a container? Grid.
5. Page-level layout? Grid.
6. Component-level layout? Usually Flexbox.

Wrapping up

Flexbox and Grid are not competitors — they are complementary tools designed for different jobs. Master both, learn the rules above, and you will never have to Google 'flexbox vs grid' again.