CSS Subgrid: Aligning Nested Grids
CSS Subgrid lets a nested grid borrow its parent's column or row tracks, solving the classic problem of aligning items inside components. This ensures elements within multiple cards, for example, line up perfectly.
Why it exists
A standard nested grid (an element with display: grid inside another grid) is completely independent of its parent's grid tracks. This makes it impossible to align elements inside one grid item with elements inside another, or with the main page grid itself. Subgrid was created to solve this common alignment challenge.
The mental model
Think of subgrid as letting a child grid "see" and "use" the parent's blueprint. Instead of drawing its own grid lines from scratch, it traces over the parent's lines for the area it occupies. This makes the child's internal layout an extension of the parent's larger system, not a separate one.
How it works
You first make a grid item a grid container by applying display: grid. Then, instead of defining new tracks (e.g., grid-template-columns: 1fr 1fr;), you set grid-template-columns: subgrid or grid-template-rows: subgrid. The browser then looks at how many parent tracks the item spans and gives the nested grid that many tracks, perfectly sized and aligned with the parent. If an item spans 3 columns of the parent grid, grid-template-columns: subgrid will give it 3 columns identical to those parent tracks.
When to use it
Use subgrid for component-based layouts where internal alignment is critical. A classic case is a row of cards where you want the titles, images, and buttons on each card to align horizontally, even if content length varies. By making each card a subgrid, their internal items can be placed on the same shared grid lines inherited from the main page grid.
When not to use it
Don't use subgrid when a nested layout should be completely independent. If a component is self-contained and its internal structure doesn't need to align with anything outside of it, a regular nested grid is simpler and more appropriate. Subgrid is specifically for creating a direct layout relationship between a parent grid and its child.
One canonical example
Imagine a gallery of user profile cards, each with a name, avatar, and bio. To ensure all names align at the top and bios align at the bottom across all cards, you would make the gallery container a grid. Each card within it would get display: grid and grid-template-rows: subgrid. This allows you to place the name in the first inherited row track and the bio in the last, guaranteeing perfect vertical alignment across the entire component set.
Interview question
When designing a layout where elements within different grid items need to align precisely with each other or the main page grid, what unique problem does CSS Subgrid solve?
- a.It provides a mechanism for grid items to automatically distribute their content evenly across available space without manual sizing.
- b.It allows nested grids to define their own unique grid lines, preventing conflicts with the parent grid.
- c.It enables a nested grid to borrow and extend the parent grid's track definitions, ensuring consistent alignment.Correct
- d.It simplifies the process of creating responsive layouts by automatically adjusting grid track sizes based on viewport width.
Why? this is the answer
CSS Subgrid's primary purpose is to allow a nested grid to inherit and utilize its parent's grid tracks, enabling precise alignment of elements across different grid items or with the main grid. Option B describes the behavior of a standard nested grid, which is independent of its parent's tracks, and is precisely the problem subgrid was created to overcome.
Just read this? Test yourself on what you have been reading.
Read the original → developer.mozilla.org
- #css
- #css grid
- #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