Use grid when you are placing content into a layout you defined in two dimensions, such as a page shell or a card grid with aligned rows and columns. Use flexbox when a single row or column of items should distribute themselves by their own content, such as a toolbar or a button group. Grid is layout first, flexbox is content first, and they nest happily inside each other.
Why interviewers ask this
This is a quick read on whether you actually write modern CSS or are still porting float era habits. The interviewer wants a decision rule rather than a feature list, plus signs that you use the parts that remove JavaScript, such as auto fit with minmax for responsive grids or gap instead of margin hacks. How you answer also hints at how much of your layout code is duplicated across breakpoints.
How to structure your answer
- Give the one line rule: two dimensional layout versus one dimensional distribution.
- Name a concrete case for each.
- Mention that they compose, so you can nest one in the other.
- Add a modern detail such as auto fit, minmax or subgrid.
Example answer
My rule is that grid is for when I already know the shape of the layout and I am placing things into it, and flexbox is for when the items should work out their own sizes along one axis. So a page shell with a sidebar and a content column, or a card grid where the rows need to line up, that is grid. A toolbar, a set of filter chips, a button row with something pushed to the far end, that is flexbox with a margin auto or space between. They nest fine, so most of my components are a grid at the outer level and flex inside each cell. The thing I use constantly is repeat with auto fit and minmax, because it gives me a responsive card grid with no media queries at all: the columns just reflow when the container gets narrow. Subgrid is the other one worth knowing, since it lets card internals line up across the whole grid rather than only within each card.
Walking into this interview soon? GhostPilot listens to your live call, spots the question the moment it is asked, and puts a structured answer on your screen in real time. Try it on your next mock, or grab a $29 Session Pass, no subscription, for the real thing.
See how it worksFollow-up questions to expect
- How would you build a responsive card grid without a single media query?
- What problem does subgrid solve that nested grid does not?
- When does aligning with gap beat aligning with margins?
Related frontend developer questions
Your interviewer will ask their own version of this. Paste your actual job description into the free Question Predictor and get the 20 questions that role is most likely to ask, with what each one is really probing.
Predict my questions