What problem does subgrid solve? Give a concrete example.

WHAT THIS TESTS: 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.

A GOOD ANSWER COVERS: 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.

COMMON WRONG ANSWERS: 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.

LIKELY FOLLOW-UPS: 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.

ONE 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.

Source: developer.mozilla.org