CSS layout

Layout interviews judge whether you pick the right algorithm for the job: one-dimensional distribution, two-dimensional tracks, positioning escapes, viewport adaptation, or component-local responsiveness.

Subtopics: Flexbox, Grid, positioning, responsive design, and container queries.

On interviews: compare Flexbox and Grid for a card grid, explain when sticky fails, and when container queries beat viewport breakpoints.

Common pitfalls: Flexbox for two-axis layouts, absolute positioning for page structure, and breakpoints that ignore component reuse.

Checklist:

• Flexbox for one main axis; Grid for rows and columns together.
• Preserve normal flow when possible.
• Start fluid; add breakpoints for content.
• Declare container-type before @container rules.