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

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.