CSS Grid vs Flexbox — Which One Should You Use?

The answer interviews want: Flexbox is one-dimensional, Grid is two-dimensional. But here is how that plays out in real projects.

Use Flexbox when…

• Items flow in ONE direction: navbar links, button groups, tag lists
• Content should decide sizing (items grow to fit their text)
• You need vertical centering inside a box

Use Grid when…

• You design in TWO directions: page layouts, photo galleries, dashboards
• The layout should decide sizing (12-column systems, fixed areas)
• You want the killer responsive pattern:

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}  /* responsive card grid — zero media queries */

The pro answer

They nest: Grid for the page skeleton (header/sidebar/main/footer), Flexbox inside each component. This site does exactly that.

Deep dives: Grid lesson · Flexbox lesson.