CSS Grid vs Flexbox: A Practical Decision Framework

CSS Grid and Flexbox are both powerful layout systems, and they solve different problems. The confusion comes from the fact that most layout tasks can technically be done with either - but one will always be simpler. Picking the wrong one leads to hacks, unnecessary wrappers, and CSS that breaks under edge cases.

Here's a framework for making the right call every time.

The Core Mental Model

Flexbox thinks in one dimension

It lays items out along a single axis - either a row or a column. You control how items grow, shrink, wrap, and align within that axis. It's excellent when you have a set of items and you want to distribute or align them along one direction.

Grid thinks in two dimensions

It defines rows and columns simultaneously. Items are placed on a grid you design first. It's the right choice when you're thinking about structure - a page layout, a card gallery, a complex form - where items need to align both horizontally and vertically.

When to Use Flexbox

Flexbox is the right tool when your layout is content-driven: the items determine the space they take, and you're arranging them in one direction.

› Navigation bars - items spaced or centered in a row
› Button groups - aligning an icon and label inside a button
› A list of cards that should wrap naturally
› Vertically centering something inside a container
› Distributing space between elements in a row

css

/* Classic flexbox patterns */

/* Center anything */
.container {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Nav with logo left, links right */
.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Cards that wrap */
.card-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

When to Use Grid

Grid is the right tool when your layout is structure-driven: you define the space first, then place items into it. If you're thinking about columns and rows at the same time, or you want items to align across multiple rows, use Grid.

› Page layouts - header, sidebar, main content, footer
› Image galleries with consistent column widths
› Dashboard card grids
› Any layout where items in different rows need to share column alignment
› Asymmetric layouts (spanning multiple columns or rows)

css

/* Classic grid patterns */

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

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

/* Item spanning multiple columns */
.featured {
  grid-column: span 2;
}

The Trap: Flexbox for Everything

A common pattern in older codebases is nested flexbox containers trying to build what is fundamentally a grid layout. You end up with wrapper divs just to create rows, percentage-based widths with calc() hacks, and fragile layouts that break when content changes.

If you're writing flex-wrap: wrap and manually setting width: calc(33% - 1rem) on items, stop - you want Grid.

css

/* Fragile flexbox hack for a 3-column grid */
.items { display: flex; flex-wrap: wrap; gap: 1rem; }
.item  { width: calc(33.333% - 0.667rem); } /* brittle! */

/* The correct approach */
.items {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

They Work Together

Grid and Flexbox are not competitors - they're complementary. A typical page might use Grid for the outer page structure, and Flexbox inside individual components like cards, navigation, or form rows.

css

/* Grid for page structure */
.page {
  display: grid;
  grid-template-columns: 260px 1fr;
}

/* Flexbox inside a card component */
.card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

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

The One-Question Test

Ask yourself: "Am I arranging items in one direction, or placing them on a two-dimensional structure?" One direction → Flexbox. Two dimensions → Grid.

Quick Reference

Centering something (horizontal or vertical) → Flexbox
Navigation bar / toolbar → Flexbox
Cards or items in a row that wrap → Flexbox or Grid
Page/section layout (rows AND columns) → Grid
Image gallery with consistent columns → Grid
Items that need to align across multiple rows → Grid
Complex layout with spanning items → Grid

Back to Blog

STORM