CSS Grid vs Flexbox: which one to use (and when to use both)

Grid vs Flexbox is the most-asked CSS layout question — and the honest answer is that they are not rivals. They solve different problems: Flexbox lays out content in one dimension (a row or a column), while CSS Grid lays out content in two dimensions (rows and columns at once). Once that clicks, choosing between them stops being a guess.

The one-line answer

If you are arranging items along a single line — a navigation bar, a row of buttons, tags in a wrap — reach for Flexbox. If you are arranging items into a true two-dimensional structure — a page layout, a photo gallery, a dashboard of cards aligned in both rows and columns — reach for Grid. Most non-trivial pages use both, and that is the intended design, not a compromise.

How they actually differ

Aspect	Flexbox	CSS Grid
Dimensions	One (row or column)	Two (rows and columns)
Driven by	The content (sizes flow from items)	The layout (you define the tracks first)
Best for	Components: nav bars, toolbars, lists, distributing space in a line	Page and section layouts, galleries, card grids, overlapping
Gaps	gap supported	gap supported (born here)
Alignment	Excellent along the main/cross axis	Excellent in both axes, plus placement by line/area
Overlap	Not really	Yes — items can share cells

When to use Flexbox

Flexbox shines when you have a set of items and want to distribute space between them along one axis. A navigation bar with a logo on the left and links on the right, a card footer pushing a button to the bottom, a row of tags that wraps when it runs out of room — these are all one-dimensional problems. The classic pattern is a single declaration:

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

Because Flexbox is content-driven, items size themselves naturally and you nudge them with flex-grow, flex-shrink and flex-basis. That makes it ideal for components whose contents you do not fully control.

When to use Grid

Grid shines when you define the structure first and place items into it. A page with a header, sidebar, main area and footer; a gallery that should keep clean rows and columns; a responsive set of cards that reflow with auto-fill — these are two-dimensional problems. You declare the tracks, then items land in them:

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

That single rule produces a responsive card grid that adds and removes columns on its own, with no media queries — something Flexbox cannot do cleanly because it only knows one axis at a time.

The real answer: use them together

On a real page you almost always use both, nested. Grid handles the big picture — the overall page or section skeleton — and Flexbox handles the small picture inside each region — aligning the items within a card, a header or a toolbar. Reaching for Grid does not mean abandoning Flexbox; they are layers of the same system.

A simple mental model: Grid is for layout, Flexbox is for components. If you are positioning regions of a page, that is Grid. If you are lining up the contents of one region, that is Flexbox. When you are unsure, ask whether the problem is genuinely two-dimensional — if the columns and rows have to align with each other, it is Grid; if it is just one line of stuff, it is Flexbox.

The fastest way to build intuition for the Flexbox side is to change the properties and watch the boxes move. Our free Flexbox Playground lets you toggle justify-content, align-items, flex-wrap and gap live and copies the generated CSS.

Browser support

Both are fully supported in every modern browser and have been for years, so support is not a deciding factor in 2026. Choose based on the shape of the problem, not on compatibility. For deeper component styling you can pair either with native CSS nesting and container queries, which let a component respond to the space it is actually given.

The bottom line

Grid vs Flexbox is the wrong framing. Flexbox is one-dimensional and content-driven; Grid is two-dimensional and layout-driven. Pick Flexbox for lines of items and components, pick Grid for true 2D layouts, and expect to nest them on any page with real structure. Knowing which question each one answers is the whole skill.