CSS LabFlexbox or grid: which one to use
You do not have to choose one. Most good pages use both, each where it fits.
The short rule
Flexbox is one-dimensional: it handles a single row or a single column at a time. Grid is two-dimensional: it handles rows and columns together. If you can describe the layout as "a line of things", start with flexbox. If you describe it as "a table of cells" or "regions of a page", start with grid.
Content first or layout first
With flexbox the size of the content drives the layout: items take the room they need, and then share what is left. With grid you define the tracks first, and the content is placed into them. That is why grid suits page templates and card galleries, where columns should line up from row to row, and flexbox suits toolbars and button groups, where each item has its own natural size.
| Situation | Better choice |
|---|---|
| Navigation bar with a logo at one end | Flexbox |
| Row of buttons that wrap on small screens | Flexbox |
| Centre one thing | Either (see the centring page) |
| Card gallery with equal columns | Grid |
| Whole-page template with header, sidebar, main, footer | Grid |
| Form with labels and fields aligned in columns | Grid |
| Items of unknown count, each sized by content | Flexbox |
| Overlapping elements in the same cell | Grid |
The card gallery test
Make a list of cards with flexbox and flex-wrap: wrap. The last row, if it has fewer cards, stretches them to fill the line or leaves them in odd positions, because each line is laid out on its own. In a grid the columns are shared by every row, so the last row lines up with the rows above. That is the single most visible difference.
Combine them
A card can be a flex column (title, text, then a button pushed to the bottom with margin-top: auto), and the list of cards a grid. The page header can be flexbox inside a grid area. Nothing stops you from nesting.
Browser support
Both are supported in current Chrome and WebKit; we checked on 13 November 2026 that display: flex, display: grid, gap on both, and repeat(auto-fit, minmax()) all work in those three.
Which one is faster?
For normal pages the difference is not measurable. Choose by the shape of the layout.
Can grid replace flexbox completely?
Technically for many layouts, but flexbox is simpler for a line of items of unknown size.
This is an independent site. It is not connected with the W3C, MDN, Google, Apple, Mozilla or Microsoft. Browser and product names belong to their owners.