CSS Grid vs Flexbox: When to Use Which (With Real Examples)

Still mixing up when to use Grid vs Flexbox? You're not alone. Let's make this clear once and for all.

The Simple Rule

Flexbox = One-dimensional layouts (row OR column)
CSS Grid = Two-dimensional layouts (rows AND columns)

That's it. That's the whole rule.

When to Use Flexbox

• Navigation bars
• Card contents (icon + text + button)
• Centering a single element
• Anything that flows in one direction

/* Classic flexbox navbar */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Card content */
.card-content {
  display: flex;
  gap: 1rem;
  align-items: center;
}

When to Use CSS Grid

• Page layouts
• Photo galleries
• Dashboard layouts
• Anything needing both rows and columns

/* Classic grid page layout */
.page {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: auto 1fr auto;
}

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

The Power Combo

Use them together:

.page {
  display: grid;
  grid-template-columns: 250px 1fr;
}

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

Grid for structure, Flexbox for components. That's the professional approach.