CSS Grid vs Flexbox Complete Guide

Two-dimensional versus one-dimensional layout—that's the fundamental difference between Grid and Flexbox. But knowing when to use each requires deeper understanding.

The Fundamental Difference

Flexbox is one-dimensional. It handles either rows OR columns, not both simultaneously. Grid is two-dimensional, handling rows AND columns at the same time.

When to Use Flexbox

Component-Level Layouts

Flexbox excels at arranging items within a component.

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

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

Dynamic Content Sizing

Flexbox shines when content size drives layout.

css
.card {
  display: flex;
  flex-direction: column;
}

.card-content {
  flex: 1; /* Grow to fill available space */
}

Alignment Control

Flexbox provides superior alignment control along a single axis.

css
.centered {
  display: flex;
  justify-content: center;
  align-items: center;
}

When to Use CSS Grid

Page-Level Layouts

Grid dominates for overall page structure.

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

Two-Dimensional Arrangements

When you need precise control in both dimensions, Grid wins.

css
.image-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}

Overlapping Elements

Grid makes overlapping elements trivial.

css
.hero {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}

.hero-content {
  grid-area: 1 / 1;
}

.hero-background {
  grid-area: 1 / 1;
  z-index: -1;
}

Combining Flexbox and Grid

The most powerful layouts use both. Grid for structure, Flexbox for components.

css
/* Grid for overall layout */
.dashboard {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

/* Flexbox within cards */
.card {
  display: flex;
  flex-direction: column;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

Real-World Examples

Navigation Bar

Use Flexbox for navigation bars. It handles alignment and spacing perfectly.

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

.nav-links {
  display: flex;
  gap: 2rem;
}

Card Grid

Use Grid for card layouts, Flexbox within cards.

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

.card {
  display: flex;
  flex-direction: column;
}

Holy Grail Layout

Grid makes this classic layout trivial.

css
.holy-grail {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

header { grid-area: 1 / 1 / 2 / 4; }
nav { grid-area: 2 / 1 / 3 / 2; }
main { grid-area: 2 / 2 / 3 / 3; }
aside { grid-area: 2 / 3 / 3 / 4; }
footer { grid-area: 3 / 1 / 4 / 4; }

Performance Considerations

Flexbox generally performs better for simple layouts. Grid has more overhead but is optimized for complex layouts. Profile your specific use case.

Browser Support

Both have excellent support. Flexbox has slightly better support in older browsers. Grid supports back to IE11 with prefixes and limitations.

Common Pitfalls

Flexbox Pitfalls

• Not setting flex-shrink: 0 on items that shouldn't shrink
• Overlooking flex-basis when sizing items
• Forgetting that flex items default to stretch alignment

Grid Pitfalls

• Using Grid for simple one-dimensional layouts
• Not utilizing auto-fit and auto-fill for responsive grids
• Over-constraining tracks with fixed sizes

Decision Framework

Ask yourself:

1. 1Is this one or two-dimensional?
2. 2Does content size drive layout?
3. 3Do I need overlap or precise alignment?

If one-dimensional with dynamic content → Flexbox If two-dimensional with fixed structure → Grid If complex layout with both needs → Combine them

Conclusion

Grid and Flexbox aren't competitors—they're complementary tools. Master both, understand their strengths, and use them together to create powerful, responsive layouts. The best layouts use Grid for structure and Flexbox for components.