Flexbox vs Grid — how do you choose?
Take a moment.
Say your answer out loud or write it down first — retrieval is what makes it stick. Reveal when you're ready.
Short answer
Flexbox lays out along ONE axis (row or column) — toolbars, nav, card content. Grid works in TWO dimensions simultaneously — page layouts, galleries, forms with aligned rows/columns. They compose: grid for macro structure, flex inside cells.
Detailed explanation
The axis distinction drives everything. Flexbox distributes children in a single direction with powerful alignment/growth controls (flex-grow/shrink/basis, justify-content, align-items) and handles dynamic content wrapping gracefully — ideal when items flow: navigation bars, button groups, media objects, form rows. Grid defines tracks in both dimensions upfront (grid-template-columns/rows), placing items into cells that stay visually aligned even with ragged content heights — dashboards, card grids, magazine layouts, whole-page scaffolding. Grid also enables named areas and overlap placement; flex can't place arbitrarily. Content-out vs layout-in framing helps: flex sizes to its content, grid carves structure for content to fill. Real interfaces mix them constantly — a grid page shell containing flex navs and card internals. Bonus points: gap works in both now, subgrid finally solves nested-track alignment, auto-fit/minmax creates responsive grids without media queries.
Example
/* Macro: two-column page */
.page {
display: grid;
grid-template-columns: 250px 1fr;
gap: 1rem;
}
/* Responsive cards without media queries */
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 1.5rem;
}
/* Micro: card internals flow on one line */
.card-header { display: flex; justify-content: space-between; }Interview tip
Answer with the one-axis/two-axis rule first, then show auto-fit + minmax — the no-media-query responsive grid always impresses.
Common mistakes
- Building page scaffolds entirely in nested flexbox.
- Not knowing gap applies to flexbox too.