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

The one-sentence rule

Grid lays out two dimensions at once. Flexbox lays out one. Use Grid for page-level layouts (header/main/sidebar/footer) and complex card grids. Use Flexbox for components (button groups, navs, form rows).

Side-by-side

	Flexbox	Grid
Dimensions	1D (row or column)	2D (rows and columns)
Defines structure upfront	No (children flow)	Yes (via grid-template)
Item placement control	Order only	Arbitrary (grid-column, grid-row, areas)
Good for navbars	Yes	Overkill
Good for page layouts	Awkward	Yes
Good for card grids	Works but wraps naively	Yes — auto-fit, auto-fill
Aligns across rows?	No (each row independent)	Yes
Browser support	Universal	Universal

Flexbox wins at:

• Navigation bars — logo on the left, links in the middle, CTA on the right
• Button groups — horizontal row of buttons with equal spacing
• Form rows — label + input + help text on one line
• Centering one thing inside another — display: flex; align-items: center; justify-content: center; is the canonical answer
• Distributing leftover space — flex: 1 on one child makes it fill remaining room

Grid wins at:

• Page layouts with named regions — "header, sidebar, main, footer"
• Card galleries — grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) gives you responsive cards for free
• Spreadsheet-like tables where rows and columns must align — Flexbox can't align cells across rows
• Overlapping elements — place items in the same grid cell and they stack
• Dashboards — named grid areas let you rearrange layouts at breakpoints by just redefining the grid, not reordering HTML

A layout that uses both

body {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  grid-template-columns: 240px 1fr;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

header { grid-area: header; }
nav    { grid-area: sidebar; }
main   { grid-area: main; }
footer { grid-area: footer; }

/* Inside header: use Flexbox for horizontal nav */
header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 2rem;
}

Common "which one?" decisions

• Photo gallery → Grid (auto-fit)
• Horizontal tab bar → Flexbox
• Pricing comparison table → Grid
• Sticky footer → Flexbox (column direction on body)
• Masonry/Pinterest layout → Neither cleanly; use CSS Grid's grid-template-rows: masonry (Firefox only) or a JS library
• Overlapping hero text on image → Grid (place both in the same cell)

Debugging layout

Browser DevTools show grid lines and flex directions visually when you hover over elements. Both Chromium and Firefox have excellent grid/flex inspectors. Use them — reading CSS alone rarely reveals why something isn't laying out as expected. Format your CSS first with CSS formatter to make the rules readable, minify before deploy with CSS minifier, and preview HTML output with HTML preview.