CSS Grid vs Flexbox: When to Use Which

The CSS Grid vs Flexbox debate is one of the most common questions beginners ask. The good news: it’s not a competition. They’re complementary tools designed for different problems. Understanding when to use each will make you a significantly better CSS developer.

The Core Difference

Flexbox is one-dimensional — it arranges items in a row OR a column.

CSS Grid is two-dimensional — it arranges items in rows AND columns simultaneously.

That’s the whole distinction. Everything else follows from it.

When to Use Flexbox

Flexbox is perfect when you’re arranging items along a single axis:

/* Navbar — horizontal row of items */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Centering a single element */
.hero {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

/* Card footer with buttons */
.card-footer {
  display: flex;
  gap: 1rem;
}

When to Use CSS Grid

Grid shines when your layout has both rows and columns:

/* Page layout */
.page {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

/* Responsive card grid */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
}

/* Dashboard with named areas */
.dashboard {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  grid-template-columns: 200px 1fr;
}

Can You Use Both Together?

Yes — and you often should. Use Grid for the overall page layout, Flexbox for component internals:

/* Grid for overall layout */
.page {
  display: grid;
  grid-template-columns: 1fr 3fr;
}

/* Flexbox inside a grid cell */
.nav-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

Quick Decision Guide

Situation	Use
Navbar with items in a row	Flexbox
Centering one element	Flexbox
Page with sidebar + main	Grid
Card gallery	Grid
Items inside a card	Flexbox
Complex dashboard layout	Grid

Conclusion

CSS Grid vs Flexbox is the wrong question. The right question is: am I arranging things in one direction or two? One direction = Flexbox. Two directions = Grid. Use both. Mix them freely. The combination gives you a complete, powerful layout system for any design.

Read next: CSS Flexbox in Plain English

External resource: MDN — CSS Grid Layout