A nested grid normally calculates its own tracks, so its items do not automatically share the parent grid’s row or column alignment. CSS subgrid lets a child grid use the parent tracks on a declared axis. This can help align nested components, but it does not solve every layout or browser-support issue and does not guarantee a performance improvement.

Conceptual image of several card-like panels with grid lines drawn around them

This is a conceptual layout image, not a rendering or browser capture of the HTML/CSS example below.

1. Sharing tracks with `grid-template-rows` or `grid-template-columns: subgrid`

Subgrid lets a child grid share its parent’s tracks on a declared row or column axis. The child’s span in the parent determines the available range, and items in that subgridded axis can participate in the parent’s track sizing. This can align nested content to parent tracks, but it does not place every item automatically at the same position. The result depends on the parent track definitions, the child span, and the content sizes.

2. Parent track sizing, gaps, and named lines

A subgrid adopts the portion of its parent grid that the child spans on the declared axis. Its row or column track sizes therefore come from the parent’s grid definition. The CSS Grid specification also says that items inside a subgrid can participate in intrinsic-size calculations for the shared parent tracks. Grid parameters flow down through nested elements, while content-based sizing information can flow back up to the parent.

Consider a row of cards whose titles and details need to use common row tracks. If each card spans the intended parent rows and declares grid-template-rows: subgrid, its internal items use those shared tracks. A longer title in one card can contribute to the intrinsic sizing of the shared rows, so the parent’s track calculation can account for the nested content. This is a sizing relationship, not a promise that every item will line up regardless of placement: the parent span, the child’s grid placement, and the chosen axis still determine which tracks are shared.

The parent’s row and column gaps are inherited by default on a subgridded axis, and the child can override either gap. Parent line names are available within the subgrid; CSS Grid Level 2 also defines a way to assign local names to the shared lines. These controls are useful when a component needs the parent’s sizing structure but clearer local line names. They do not create new implicit tracks on the subgridded axis. If auto-placed items exceed the span supplied by the parent, inspect their resulting placement and overflow rather than assuming the subgrid will extend itself.

For a card component, first give each card the parent-row span it needs, then subgrid that row axis. Different title lengths may affect shared track sizing, but inconsistent spans or child placement can still produce different alignment. Test with the longest real titles and images.

3. A minimal two-row example and what to check

The parent places each card across two rows; each card then shares those rows with its title and description. If a long title increases the first shared row’s size, both description rows start on the same grid line.

<style>
.cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.card {
  display: grid;
  grid-row: span 2;
  grid-template-rows: subgrid;
  gap: 0.5rem;
  min-width: 0;
}
.card h2, .card p { margin: 0; }
@media (max-width: 38rem) {
  .cards { grid-template-columns: 1fr; }
}
</style>
<div class="cards">
  <article class="card">
    <h2>City arts walk</h2>
    <p>Visit a historic street and a small gallery.</p>
  </article>
  <article class="card">
    <h2>A longer riverside route for observing seasonal habitat changes</h2>
    <p>Explore plants and paths along the river.</p>
  </article>
</div>

In current Chrome, the original English HTML example was checked at two widths. At 720px, both descriptions started at 101.5px even though the longer heading wrapped to three lines, and there was no horizontal document overflow. At 390px, the cards stacked at y=8px and y=80px and document scrollWidth was 390px. This verifies only this English example at those widths; the Korean and Japanese examples, other browsers, and other text were not tested. Keep expected behavior and broader content checks distinct. Provide a separate layout where subgrid is unavailable.

References and Source Links