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

The one rule that decides it

Flexbox is one-dimensional: it lays items out in a single row or a single column. CSS Grid is two-dimensional: it controls rows and columns at the same time. If you only need to align things along one axis, reach for Flexbox. If you're arranging content into a true grid of rows and columns, reach for Grid.

When to use Flexbox

Flexbox excels at distributing space among items along a single line — think navigation bars, button groups, and centering content. Its alignment properties make vertical centering, once the bane of CSS, completely trivial.

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

When to use CSS Grid

Grid is the right tool when your design has both rows and columns that need to line up — image galleries, dashboard layouts, and full page structures. It lets you define the overall shape of a layout in a few lines.

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

They work beautifully together

This is the part beginners miss: you don't have to choose globally. A common, robust pattern is to use Grid for the page-level layout and Flexbox inside individual components. Mixing them is not only allowed — it's best practice.

A quick decision checklist

1. Do I need rows AND columns to align? Use Grid.
2. Am I arranging items in a single line and distributing space? Use Flexbox.
3. Is this the overall page skeleton? Grid is usually cleaner.
4. Is this a small component like a toolbar or card footer? Flexbox is usually simpler.