What problem does subgrid solve? Give a concrete example.
This tests whether you know nested grids create track contexts breaking cross-level alignment. A strong answer explains subgrid inherits parent tracks, using a card whose internals align to a global page grid.
What's really being asked
This question probes whether you understand the fundamental limitation of nested CSS grids. When you apply display: grid to a child of a grid container, that child becomes an independent grid with its own track list. Its children flow in normal flow inside that new context, meaning they have no knowledge of the parent grid's tracks. The interviewer wants to see if you know that subgrid is the mechanism that breaks this isolation by allowing a nested grid to adopt the parent's track definitions rather than creating its own.
The full answer
First, articulate the core problem. In a standard nested grid, the inner grid defines its own columns and rows, so a grandchild can never line up with the outer grid's tracks. Second, define subgrid as a value for grid-template-columns or grid-template-rows that causes the nested grid to use the parent's tracks across its spanned area. Third, provide a concrete layout scenario where this matters. Fourth, mention that gaps are inherited but overridable, and that line names can be passed down or declared locally.
The mistakes people make
Calling subgrid syntactic sugar for repeat or percentage-based layouts. Claiming it only affects gap inheritance. Describing it as a way to make grids responsive without media queries. Suggesting that nested grids already align automatically if you use the same fraction values. Another red flag is confusing subgrid with the contents value of display or implying it changes the DOM structure.
What usually comes next
How do named grid lines work with subgrid? Can you override gap on a subgrid? What happens if the subgrid spans an implicit track area? How does subgrid affect overflow or minimum content sizing? The interviewer might also ask how you would polyfill or gracefully degrade for older browsers, or how subgrid interacts with container queries.
A concrete example
Imagine a nine-column page grid with repeat(9, 1fr) columns. A card component sits at column two through seven. Inside that card, you have a title, an image, and a button. Without subgrid, the card's internal grid is independent. If you want the title to start at the card's left edge and the button to align with the page's global column four, you are forced to use magic numbers or complex calc expressions. With grid-template-columns: subgrid, the card inherits the five column tracks from its parent span. The title can now be placed on subgrid column one, and the button on subgrid column three, perfectly aligning with the outer page grid. The rows remain independent unless you also declare grid-template-rows: subgrid.
Interview question
In a nested CSS grid, what fundamentally prevents a grandchild element from aligning to the outer grid's tracks without using subgrid?
- a.Nested grids automatically align tracks when using identical fraction values, so explicit placement is unnecessary.
- b.The inner grid establishes its own independent track list, isolating its children from the parent's grid lines.Correct
- c.The inner grid inherits the parent's gap values but recalculates track positions based on its own content width.
- d.The grandchild elements are removed from the grid formatting context and instead flow in normal flow.
Why? this is the answer
The inner grid creates its own independent track list, so its children have no knowledge of the outer grid's lines. Distractor D is tempting because identical fraction values appear to create alignment, but independent track contexts mean the grids remain isolated regardless of the units used.
Just read this? Test yourself on what you have been reading.
Read the original → developer.mozilla.org
- #css
- #grid
- #subgrid
- #layout
- #design-systems
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