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 →