Flexbox vs CSS Grid
Short answer
Use Grid when you need to control rows and columns together — page layouts, card grids, anything with alignment in both directions. Use Flexbox when content flows along a single axis and should size itself naturally — toolbars, button rows, navigation. Most real interfaces nest Flexbox inside Grid cells, and that combination is the normal answer rather than a compromise.
Side by side
| Flexbox | CSS Grid | |
|---|---|---|
| Dimensions controlled | One axis at a time | Rows and columns together |
| Driven by | Content size | The container's defined tracks |
| Item placement | In source order along the axis | Anywhere in the grid, independent of source order |
| Wrapping behaviour | Items wrap and size to content | Items fill defined tracks |
| Alignment across rows | Rows are independent of each other | Columns line up across every row |
| Overlapping items | Not really | Yes — items can share a cell |
| Best for | Toolbars, nav, tag lists, button groups | Page layout, card grids, forms, galleries |
| gap support | Yes | Yes |
When to use each
Use Flexbox when…
When you have a row or column of items whose sizes should be determined by their content — a navigation bar, a group of buttons, a list of tags that wraps naturally, or centring one thing inside another.
Use CSS Grid when…
When you are defining a structure and placing content into it — a page shell with header, sidebar and footer, a card grid where columns must line up across rows, or a form where labels and inputs align down the page.
The real distinction: who decides the size
The usual summary is 'Flexbox is one-dimensional, Grid is two-dimensional', which is true but not the most useful framing. The sharper difference is whether the content or the container decides the layout.
Flexbox is content-first. You give it items and it distributes them along an axis based on how big they want to be. A row of buttons with different labels ends up with different widths, and that is exactly right.
Grid is layout-first. You define the tracks and then place content into them. Every item in a column gets that column's width whether it wants it or not, which is what makes card grids line up.
So the question to ask is not 'how many dimensions' but 'do I want these things to line up with each other, or to size themselves?'. Lining up means Grid. Sizing themselves means Flexbox.
Where each one gets awkward
Flexbox struggles when you need alignment across wrapped rows. Because each row is laid out independently, items in the second row do not line up with items in the first — a wrapped flex layout produces a ragged result where Grid would produce a clean matrix.
The common workaround is flex-basis with percentages, which brings back the problem percentages have always had: they do not account for the gap, so the layout overflows once spacing is added. Grid's fr unit subtracts gaps first and cannot overflow that way.
Grid gets awkward in the opposite case. Forcing a row of content-sized items into fixed tracks means fighting the tracks — a toolbar where each button should be exactly as wide as its label is more work in Grid than it needs to be.
Use both
The most common real-world pattern is Grid for the outer structure and Flexbox inside individual cells. A card grid uses Grid so the cards align, and each card uses Flexbox internally to stack its title, body and a footer row of buttons.
This is not a compromise between two competing systems — it is what both were designed for. Grid handles the relationship between cards; Flexbox handles the flow of content within one.
gap works in both, so the old habit of using negative margins for spacing is no longer needed in either.
Frequently asked questions
Is Grid replacing Flexbox?
Which has better browser support?
Which performs better?
How do I make a responsive card grid without media queries?
Try the CSS Grid Generator
Set columns, rows, gaps and alignment, preview the layout live, and copy the grid CSS with the matching HTML.