Grid vs flexbox: a decision framework

The wrong question

"Should I use Grid or flexbox?" implies a rivalry. In practice, they solve different problems and compose together beautifully. The page layout might be Grid, the card content inside it flexbox, and the card grid itself Grid again. The real question is: does this layout need to control both axes, or just one?

Use flexbox when…

Flexbox excels at one-dimensional distribution — items in a row or a column. It's content-driven: items take up the space they need, and flex properties control how leftover space is distributed.

/* Navigation bar — items in a row, space distributed */
.nav {
  display: flex;
  gap: 1.5rem;
  align-items: center;
}

/* Card content — stack elements vertically, push footer down */
.card-body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.card-body .footer { margin-top: auto; }

Good for: navigation bars, button groups, form input rows, card content stacking, centering a single element, tag/chip groups, media objects.

Use Grid when…

Grid excels at two-dimensional layout — controlling both rows and columns simultaneously. It's container-driven: you define a structure and items fill it.

/* Page layout — sidebar + content + aside */
.page {
  display: grid;
  grid-template-columns: 15rem 1fr 15rem;
  gap: 2rem;
}

/* Responsive card grid — auto-filling columns */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: 1rem;
}

Good for: page layouts, card grids, dashboard panels, form layouts, any design where items need to align across both axes.

The decision tree

• One row or one column of items? → Flexbox.
• Rows AND columns need alignment? → Grid.
• Items should wrap naturally based on content size? → Flexbox with flex-wrap.
• Items should fill a defined track structure? → Grid with auto-fill / auto-fit.
• Items should overlap? → Grid (items can share grid cells).
• One item should push to the end? → Flexbox with margin-left: auto or margin-top: auto.

Using both together

The best layouts use both. A common pattern: Grid for the page shell and card grid, flexbox inside each card for content stacking, and flexbox for the navigation. Each tool handles what it does best.

Performance

Both are fast. Grid has slightly more layout computation for complex track sizing, but the difference is negligible for typical UIs. Choose based on correctness and clarity, not performance.