When laying out a component, how do you decide between CSS Flexbox and Grid, and where do you combine them?

technical-conceptual · Mid level · software-engineering

What the interviewer is really asking

Assesses whether the candidate understands the one-dimensional vs two-dimensional model behind Flexbox and Grid and can choose pragmatically, rather than memorizing one tool for everything.

What to say

• Anchor on dimensionality: Flexbox is one-dimensional — it distributes space along a single axis and is great for content-driven sizing like nav bars, toolbars, and wrapping chip rows; Grid is two-dimensional and owns row-and-column page structure like dashboards and card galleries.
• Note that they compose: a Grid defines the page skeleton, and each cell is often a flex container aligning its own content, so 'Grid for structure, Flex for alignment' is a common split.
• Mention modern levers: gap works in both and is Baseline-supported, so margins-for-spacing is mostly obsolete, and you can pair Grid with container queries so a component reflows based on its own width, not the viewport.

What to avoid

• Treating Grid and Flexbox as competitors where one is strictly better, rather than complementary tools.
• Forcing a two-dimensional dashboard out of nested flex containers when Grid expresses it in a few lines.
• Using floats, inline-block hacks, or margin spacing where gap and modern layout solve it cleanly.

Example answers

Strong: I ask whether I'm controlling one axis or two. A nav bar or a wrapping tag list is one-dimensional and content-driven, so Flexbox with flex-wrap and gap. A card dashboard with aligned rows and columns is two-dimensional, so Grid with grid-template-columns. In practice I use Grid for the page skeleton and make each cell a flex container to align its own content, and I lean on gap instead of margins since it's well supported now.

Weak: I mostly just use Flexbox for everything since I know it well. If something needs columns I nest a bunch of flex containers until it looks right. Grid feels complicated so I avoid it.