Learn how to inherit parent grid rows or columns so independent child components align to the same structural guides.
Without `subgrid`, nested components often drift out of alignment.
Imagine a row of cards where one title wraps into two lines and another stays on one line. The image, summary or CTA under that title may end up starting at different vertical positions in each card.
With plain nested Grid, every card builds its own internal structure independently. `subgrid` is valuable because it lets those internal pieces follow the same parent-defined guides.
The child must already be part of the parent grid before it can inherit anything.
The usual sequence is simple: the parent defines the grid, the child is positioned inside that grid, and the child then becomes a grid itself.
Instead of redefining its own tracks, the child uses `grid-template-columns: subgrid` or `grid-template-rows: subgrid`.
One especially useful detail is that line names can be inherited too, which keeps larger layouts easier to reason about.
Inheritance does not mean every spacing decision has to stay identical.
By default, a subgrid follows the parent gap values. However, CSS also lets you override those gap values on the child when that improves the internal rhythm.
That makes `subgrid` especially useful for editorial or dashboard interfaces where the outer layout spacing and inner component spacing should not always feel the same.
It is powerful, but not every nested component needs it.
If a design does not need strict alignment between repeated components, `subgrid` may add complexity without returning much value.
It is most worth using when several modules must share the same visual baseline or column rhythm, such as cards in a listing or repeated dashboard panels.
It is usable today, but compatibility checks still matter.
Modern browser support is strong, but you should still confirm compatibility if the project has legacy requirements.
In many projects, a graceful fallback is enough because `subgrid` usually improves precision rather than unlocking the only possible layout.
Use it intentionally, not anxiously.
In most realistic use cases, `subgrid` does not introduce a meaningful performance penalty on its own.
As with any advanced layout feature, the main risk is not one declaration but overly complicated nesting that becomes hard to debug and maintain.
Subgrid is really about shared visual guides.
Picture three cards with a title, an image and a short paragraph. If the titles have different heights, the next internal blocks no longer line up neatly.
With `subgrid`, the card effectively tells the parent layout: reuse your tracks here too, so my internal content aligns with the rest of the row.
The child becomes a grid and borrows the parent tracks.
To use it, the element must already be a child of a Grid container and must also set `display: grid`.
Instead of redefining the row or column sizes, you use the `subgrid` keyword.
The difference becomes obvious when repeated components vary in content length.
Shows how internal content can align to the same structural guides defined by the outer layout.
