31 Oct 2026 · CSS guide · 6 min read

CSS Flexbox vs Grid: When To Use Which

Both Flexbox and Grid arrange elements, but they solve different problems. This guide shows when each one wins.

For years developers used floats and clearfixes to build layouts. Flexbox and Grid changed that, but they are not competitors. The simplest way to decide between them is to count dimensions.

One dimension versus two

Flexbox lays out items along a single axis, either a row or a column. You decide the direction and the items flow along it. Grid lays out items on two axes at once, rows and columns, so you can place an item precisely in the grid you define.

If you are arranging a set of things in a line, reach for Flexbox. If you are describing an actual grid of rows and columns, reach for Grid. Many real interfaces use both at the same time.

Flexbox basics

Turning an element into a flex container is one line. Its direct children become flex items, and you distribute them with alignment properties.

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

justify-content spaces items along the main axis, while align-items aligns them on the cross axis. Adding flex-wrap lets items move to a new line when space runs out, and gap adds consistent spacing without margin hacks.

Grid basics

Grid shines when you know you want columns. The fr unit divides the free space, and repeat keeps the rule short.

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

For a responsive grid that adds columns as the screen widens, combine repeat with auto-fit and minmax. This gives cards a sensible minimum size and fills the row automatically.

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

A card grid and a navbar

A navigation bar is a row with items pushed to the edges, which is exactly what Flexbox does best. A product listing with equal-width cards across several rows is a Grid problem. Choosing based on the shape of the content keeps the CSS short.

Combining both

The two systems nest happily. A page can use Grid for the overall structure, then Flexbox inside a header cell to align a title and a button. Flex items can also be grid items and the reverse, so you never have to pick one for the entire page.

When to use which

Use Flexbox for rows or columns of items, navigation, toolbars, and distributing space along one axis. Use Grid for page frameworks, galleries, dashboards and any layout where rows and columns must align. When in doubt, ask whether you are thinking in one line or in a table, and the choice usually becomes obvious.

Back to all blogs