CSS Grid vs Flexbox: When to Use Each (With Real Examples)

The One Rule That Clears Everything Up

Flexbox is one-dimensional — it handles either a row OR a column at a time. CSS Grid is two-dimensional — it handles rows AND columns simultaneously.

That's the core distinction. Everything else follows from it.

---

When to Use Flexbox

Use Flexbox when you're laying out items in a single direction — either horizontally or vertically — and want them to grow, shrink, or wrap naturally.

Navigation Bar

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

Button Group

.button-group {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

Centering Content (classic use case)

.card {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 200px;
}

Sidebar + Main Content

.layout {
  display: flex;
}
.sidebar { width: 250px; flex-shrink: 0; }
.main { flex: 1; }

Flexbox shines when the content drives the size and you need items to respond fluidly.

---

When to Use CSS Grid

Use Grid when you're defining the layout structure first and placing items into it — especially when alignment across both axes matters.

Classic Page Layout

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

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

Card Grid (Responsive, No Media Queries)

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
}

This single declaration creates a responsive grid that reflows without a single media query — one of Grid's superpowers.

Precise Placement

.hero-image {
  grid-column: 1 / 3;
  grid-row: 1 / 2;
}

---

Can You Use Both Together? Yes.

This is actually common in real apps:

/* Grid handles the page macro-layout */
.page {
  display: grid;
  grid-template-columns: 250px 1fr;
}

/* Flexbox handles items inside a grid cell */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

---

Quick Decision Guide

Situation	Use
Navigation bar	Flexbox
Page layout	Grid
Responsive card grid	Grid
Centering a single item	Flexbox
Items in a single row	Flexbox
Complex 2D placement	Grid
Unknown number of items	Flexbox
Items must align across rows	Grid

---

Conclusion

Stop thinking of Grid and Flexbox as competitors — they're complementary tools. Grid for macro layout, Flexbox for micro layout. Once this clicks, you'll spend far less time fighting with CSS and far more time shipping features.