Build a responsive 3-column layout with Flexbox and Grid

WHAT THIS TESTS: Your understanding of mobile-first responsive design, the fundamental differences between one-dimensional and two-dimensional layout tools, and whether you can articulate trade-offs between Flexbox and Grid in a real-world scenario. Interviewers want to see that you write maintainable CSS and do not treat layout methods as interchangeable black boxes.

A GOOD ANSWER COVERS: First, the mobile-first breakpoint strategy. Start with the single-column default and use a min-width 768px media query to introduce the three-column layout. Second, the Flexbox implementation: set the container to display flex and flex-wrap wrap, then give each child flex 1 1 100 percent so they stack naturally. Inside the breakpoint, change the item basis to flex 1 1 0 or roughly 33 percent so they sit side by side. Third, the Grid implementation: set the container to display grid and grid-template-columns 1fr for mobile. At the breakpoint, switch to grid-template-columns repeat 3 1fr or define named grid-template-areas to visually rearrange content without altering source order. Fourth, practical polish: mention using gap instead of margin for spacing, and note that Grid handles two-dimensional alignment natively while Flexbox requires wrapping logic for rows.

COMMON WRONG ANSWERS: Using max-width media queries to strip columns away desktop-first, which is harder to maintain and bloats overrides. Setting fixed pixel widths like width 300px without flex-wrap, causing overflow on small screens. Claiming CSS Grid makes Flexbox obsolete, which signals shallow knowledge since Flexbox is still superior for component-level one-dimensional distribution. Ignoring the stacking requirement entirely and only describing the three-column state. Using float-based techniques in 2024 without a compelling legacy reason.

LIKELY FOLLOW-UPS: How would you handle a layout where the middle column is twice as wide as the side columns? With Grid you can use fr units like 1fr 2fr 1fr, while Flexbox requires adjusting flex-grow ratios. What if you need to reorder the middle column visually to the last position on mobile? Grid can do this with grid-area and named areas without touching HTML, whereas Flexbox would need order properties that can break screen-reader flow. How do subgrid or container queries change this answer? Subgrid lets nested grids align to the parent track, and container queries let you respond to the component width instead of the viewport.

ONE CONCRETE EXAMPLE: For Flexbox, the CSS would look like this in spirit: .container display flex, flex-wrap wrap, gap 1rem. .item flex 1 1 100 percent. Then inside media min-width 768px, .item flex 1 1 0. For Grid: .container display grid, gap 1rem, grid-template-columns 1fr. Then inside the same media query, grid-template-columns repeat 3 minmax 0 1fr. Both approaches keep the HTML identical and respect source order.

Source: developer.mozilla.org