Build a responsive 3-column layout with Flexbox and Grid
Tests whether you pick right tool for responsive layouts. Good answers use flex-wrap and flex-basis for Flexbox, repeat() or grid-template-areas for Grid, in min-width 768px query. Red flag: desktop-first max-width queries or claiming Grid replaces Flexbox.
What's really being asked
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.
The full answer
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.
The mistakes people make
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.
What usually comes next
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.
A 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.
Interview question
Which strategy correctly implements a mobile-first responsive 3-column layout using either Flexbox or Grid?
- a.Apply max-width media queries to remove columns desktop-first, which reduces override complexity.
- b.Give Flexbox children fixed widths like 300px and expect default flex behavior to stack them on mobile.
- c.Skip media queries by using Grid auto-fit because Grid replaces Flexbox for all responsive layouts.
- d.Introduce the three-column layout inside a min-width 768px query, using flex-basis changes for Flexbox or repeat(3, 1fr) for Grid.Correct
Why? this is the answer
D correctly describes the mobile-first approach: start with a single-column default, then use a min-width breakpoint to introduce columns via flex-basis for Flexbox or repeat(3, 1fr) for Grid. A is tempting but wrong because desktop-first max-width queries actually increase override bloat and are harder to maintain.
Just read this? Test yourself on what you have been reading.
Read the original → developer.mozilla.org
You just looked this up. Could you explain it out loud?
That is the part interviews actually test. Tezvyn takes questions like this one and gives you what the interviewer is really checking, the answer that lands, and the mistake that ends the conversation, in the four minutes before your next meeting.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on css — each one lists the topics its interview covers.
See open roles