Flexbox vs Grid: The Rule I Use to Decide in 10 Seconds

Fifteen years of CSS taught me that most layout indecision comes down to one question, and it takes ten seconds to answer. Here it is.

The one-sentence rule

If you're arranging content in one direction, use Flexbox. If you're designing a layout in two directions at once, use Grid.

That's it: 1D vs 2D. Flexbox thinks in a line (a row or a column) and lets content size itself along it. Grid thinks in a lattice (rows and columns together) and places content into a structure you define. Everything else — alignment syntax, gap, ordering — the two share more than they differ.

A useful corollary: Flexbox is content-out (items determine the layout), Grid is layout-in (the layout determines where items go). If you can sketch your design as boxes flowing in a line, it's flex. If you'd sketch it as a floor plan, it's grid.

Flexbox in practice

The classic cases: navbars, button groups, toolbars, form rows — anything that's a strip of items.

.navbar {
  display: flex;
  align-items: center;
  gap: 1rem;
}
 
.navbar .actions {
  margin-left: auto; /* push the actions to the far end */
}

Everything here is one-directional: items sit in a row, they're vertically centered, and one margin pushes the actions group to the end. Flexbox handles unknown item counts and unknown item widths gracefully — the content shapes the layout, which is exactly what you want in a nav.

Grid in practice

The classic cases: page shells, card galleries, dashboards, anything with alignment across both axes.

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

Three lines, and you get a responsive card gallery with no media queries: as many 240px+ columns as fit, all equal width, rows aligning automatically. Doing this with Flexbox means fighting flex-basis percentages and accepting that the last row's items stretch oddly — because you're asking a 1D tool to maintain 2D alignment. (This auto-fit/ minmax pattern is a cornerstone of fluid, media-query-light CSS.)

Mixing them is the real-world pattern

This isn't an either/or religion. The most common production pattern is Grid for the structure, Flexbox inside the cells:

.page {
  display: grid;
  grid-template-columns: 240px 1fr; /* sidebar + content */
}
 
.card {
  display: flex; /* inside a grid cell */
  flex-direction: column;
}
 
.card .footer {
  margin-top: auto; /* pin footer to the card bottom */
}

The page is a floor plan → Grid. Each card is a column of content with a pinned footer → Flexbox. Two tools, each doing the job it's shaped for.

The 10-second decision checklist

• One direction (a strip of things)? Flexbox.
• Two directions (a plan with rows and columns)? Grid.
• Should content size the layout? Flexbox.
• Should the layout place the content? Grid.
• Cards must align across rows? Grid — that's 2D alignment.
• Building both? Grid outside, Flexbox inside.

Bookmark the list, but honestly: after a week of asking "1D or 2D?", you won't need it.