Grid and Flexbox are not competitors — they're complementary tools for different jobs. Use them right and CSS layout becomes nearly effortless. Use them wrong and you fight the browser. This guide gives you the decision rules.
Side-by-Side
| Aspect | Flexbox | Grid |
|---|
| Dimensionality | 1D (row or column) | 2D (rows and columns) |
| Sizing model | Content-driven | Container-driven |
| Strength | Distributing items along an axis | Aligning items across both axes |
| Typical use | Nav, button groups, card content | Page layout, card grids, dashboards |
| Gap support | Yes | Yes (better tooling) |
| Subgrid | N/A | Yes |
Decision Rules
- Is the layout one-directional? Flexbox.
- Do items need to align across rows and columns simultaneously? Grid.
- Do you want the container to dictate structure? Grid.
- Do you want content to dictate sizing? Flexbox.
- Are you building a page layout? Grid for the outer structure; Flexbox inside.
Common Patterns
Holy grail page layout (Grid):
.page {
display: grid;
grid-template:
"header header" auto
"sidebar main" 1fr
"footer footer" auto / 240px 1fr;
}
Auto-flow card grid (Grid):
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
Nav bar (Flexbox):
.nav { display: flex; align-items: center; gap: 16px; }
.nav .spacer { flex: 1; }
Centering anything (Flexbox or Grid):
.center { display: grid; place-items: center; }
Try It Yourself
Generate box shadows, gradients, and other CSS effects with DesignKit's CSS tools.
Box Shadow Generator →
The one-axis vs two-axis rule
Flexbox lays out items along a single axis — either a row or a column — with the other axis handled implicitly. CSS Grid lays out items in two axes simultaneously, with explicit control over both rows and columns. That is the entire mental model. A horizontal navigation bar, a vertical sidebar, a button row, a tag list — all flexbox. A dashboard, a photo gallery, a magazine-style article layout, a form with labels and inputs aligned across rows — all grid.
A practical decision checklist
- Is the layout one-dimensional? Flexbox.
- Do items need to align across both rows AND columns? Grid.
- Does content drive size (intrinsic), or does layout drive size (extrinsic)? Content-driven → flexbox. Layout-driven → grid.
- Do you need named areas or precise span placement? Grid.
- Are you wrapping items into rows of variable length? Flexbox with
flex-wrap — grid would force a fixed column count.
Nesting them together
The two are not competitors. A typical product page uses CSS Grid for the page-level skeleton (header, sidebar, main, footer) and flexbox inside each cell for the local arrangement of controls, badges, and meta rows. Reaching for both is normal — the question is which one belongs at which level.
Three patterns and the correct choice
- Card grid that wraps responsively. Use
display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));. Flexbox can do this, but you lose equal column widths and gaps behave less predictably. - Form with label–input pairs aligned in two columns. Grid, every time. Flexbox alignment across rows requires fixed widths.
- Toolbar with left-aligned buttons and a right-aligned "save" button. Flexbox with
justify-content: space-between or margin-left: auto on the trailing item.
Browser support. Both are fully supported in every browser shipped after 2017. There is no compatibility reason left to choose floats or table-based layout for new work.