CSS Grid vs Flexbox

Flexbox and Grid both showed up to solve the same frustration: laying out a page used to mean floats, clearfixes, and a lot of guessing. But they aren't interchangeable — each one is built for a different shape of problem.

The short version

• Flexbox is one-dimensional. It lays items out in a row or a column, and excels at distributing space between them.
• Grid is two-dimensional. It lays items out in rows and columns at the same time, and excels at aligning things into a structure.

If you're arranging a single row of buttons, reach for Flexbox. If you're building a page layout with a header, sidebar, and content area, reach for Grid.

Flexbox in practice

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

This is the classic "row of things that need spacing" pattern — a navbar, a button group, a card footer.

Grid in practice

.page {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-areas: "sidebar content";
  gap: 1.5rem;
}

.sidebar {
  grid-area: sidebar;
}

.content {
  grid-area: content;
}

Named grid-template-areas make the layout readable at a glance — you can see the page shape without mentally tracing column numbers.

Combining them

In real layouts you'll usually use both: Grid for the overall page skeleton, Flexbox for the smaller components living inside each grid cell.

.card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

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

Rule of thumb

Ask whether you're aligning content along one axis or two. One axis, Flexbox. Two axes, Grid. Everything else follows from that.