CSS Grid vs. Flexbox: When to Use Each

Both Flexbox and Grid are modern CSS layout systems, and beginners often wonder which to learn. The answer is both — but for different jobs.

The one-line rule

• Flexbox is for laying out items in a single direction — a row or a column.
• Grid is for two dimensions at once — rows and columns together.

If you’re arranging things along one axis, reach for Flexbox. If you’re building a true grid where rows and columns must align, reach for Grid.

Flexbox in practice

A navigation bar — items in a row, spaced apart:

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

Flexbox shines when item sizes are content-driven and you want them to grow, shrink, or wrap naturally.

Grid in practice

A responsive card gallery — equal columns that reflow:

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

That single grid-template-columns line creates as many equal columns as fit, each at least 240px wide — no media queries required.

Use them together

They compose. A common pattern: Grid for the page skeleton (header, sidebar, main, footer), Flexbox for the components inside each region.

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

Quick decision guide

• Aligning a few items in a row or column? Flexbox.
• Need items to wrap based on available space? Flexbox (or auto-fill Grid).
• Building a layout where columns and rows must line up? Grid.
• Overall page structure? Grid.

Learn the one-direction-vs-two-dimensions distinction and the choice becomes automatic.