CSS Flexbox vs Grid: When to Use Which (Definitive Guide)

The Layout Revolution

Before Flexbox and Grid, building layouts in CSS required floats, clearfixes, and a mountain of hacks. Today we have two powerful, purpose-built layout systems.

The short answer: use Flexbox for 1D layouts and Grid for 2D layouts. But the reality is more nuanced.

---

Flexbox: One-Dimensional Layout

Flexbox controls alignment along a single axis — either a row or a column. Think of it like a shelf.

Key Properties

.container {
  display: flex;
  flex-direction: row | column;
  justify-content: flex-start | center | space-between;
  align-items: stretch | flex-start | center;
  flex-wrap: nowrap | wrap;
  gap: 16px;
}

.item {
  flex: 1;
  flex-grow: 2;
  flex-shrink: 0;
  flex-basis: 200px;
}

Best Use Cases

• Navigation bars — horizontal list of links
• Card rows — equal-height cards in a row
• Button groups — horizontally centered buttons
• Centering a single element

Flexbox Centering

.center-everything {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

---

CSS Grid: Two-Dimensional Layout

Grid controls alignment along both rows and columns simultaneously. Think of it like a spreadsheet.

Key Properties

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto 1fr auto;
  gap: 20px;
}

.item {
  grid-column: 1 / 3;
  grid-row: 2 / 4;
}

Auto-Responsive Grid (No Media Queries!)

.responsive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

---

Comparison Table

---

Using Both Together

The most powerful pattern: Grid for macro layout, Flexbox inside components.

/* Grid for page structure */
.page {
  display: grid;
  grid-template-areas:
    "header"
    "main"
    "footer";
  min-height: 100vh;
}

/* Flexbox for navigation */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

---

Conclusion

Flexbox and Grid are complementary. Use Grid for page structure, Flexbox for components. Experiment with our CSS Flexbox Generator to visualize properties in real time.