CSS: flexbox vs grid — when do I use which?

Question

I can make most layouts with either one. Is there a rule for choosing?

Accepted Answer

A useful rule of thumb:

- **Flexbox** is **one-dimensional**: a row *or* a column. Content decides the sizing. Great for navbars, button groups, centering things, and a card's internal layout.
- **Grid** is **two-dimensional**: rows *and* columns together. The layout decides the sizing. Great for page layouts, card galleries, dashboards, and forms with aligned labels.

```css
/* responsive card gallery, no media queries */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem;
}

/* navbar */
.nav { display: flex; align-items: center; gap: 1rem; }
.nav .spacer { margin-left: auto; }
```

They combine naturally: grid for the page skeleton, flex inside the components.

2 Answers