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.