CSS Grid vs Flexbox: When to Use Which

The Short Answer

Use Flexbox for one-dimensional layouts (a row or a column). Use CSS Grid for two-dimensional layouts (rows AND columns simultaneously). In practice, you'll often use both in the same project — they complement each other perfectly.

Flexbox: The One-Dimension Champion

Flexbox excels at distributing space along a single axis and aligning items within a container:

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

It's perfect for: navigation bars, button groups, centering content, card footers, and anywhere you need items in a single line with smart spacing.

CSS Grid: Two-Dimensional Layouts

Grid gives you explicit control over both rows and columns:

.dashboard {
  display: grid;
  grid-template-columns: 240px 1fr 320px;
  grid-template-rows: auto 1fr;
  min-height: 100vh;
}

.sidebar { grid-row: 1 / -1; }
.header  { grid-column: 1 / -1; }

The fr Unit

The fr (fraction) unit is Grid's superpower — it distributes available space proportionally:

grid-template-columns: 1fr 2fr 1fr;
/* Middle column gets twice the space */

Auto-placement and minmax

Grid's auto-placement algorithm can create responsive layouts with zero media queries:

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

This creates as many columns as fit, each at least 280px wide — no breakpoints needed.

My Decision Framework

• Aligning items in a toolbar or nav? → Flexbox
• Building a page layout with sidebar? → Grid
• Card grid that should reflow? → Grid with auto-fill
• Button with icon and text? → Flexbox
• Complex form with labels and inputs? → Grid