Skip to content
FrontendHaltFrontendHalt
CSS·Intermediate·Coding·1 min read

How do you choose between normal flow, Flexbox, and Grid?

Short interview answer

Start with normal flow because block and inline layout already adapt to content. Use Flexbox for one-dimensional distribution and alignment, and Grid when rows and columns must coordinate. They compose rather than compete.

Example

CSS
/* One axis: a toolbar */.toolbar { display: flex; gap: 12px; align-items: center; }
/* Two axes: a page shell */.page {  display: grid;  grid-template-columns: 240px 1fr;  grid-template-rows: auto 1fr;}

Key takeaway

Explain the underlying mental model clearly, then support it with a concrete example and its trade-offs.

← Back to CSS layout

Related questions