Inspect the working example
The parent is 260px wide with 90px and 1fr tracks and an 8px gap. Each nested row spans both tracks and uses subgrid for its columns.
| Case | Input or inspection | Result and meaning |
|---|---|---|
| Label track | Parent fixed track | 90px |
| Content track | 260−90−8 | 162px |
| Content start | 90+8 | 98px for both rows |
Follow the browser mechanism
Subgrid participates in the parent track layout across the row’s span. Separate auto-sized child grids can derive different label widths and therefore different content starts. Support must be checked in the actual engine before trusting the intended alignment.
Independent auto tracks drift apart
The alternative replaces subgrid with an independent auto/1fr grid for each row.
<style>body{margin:8px}</style>
<style>.facts{display:grid;width:260px;grid-template-columns:90px 1fr;gap:8px}.row{display:grid;grid-column:1/-1;grid-template-columns:auto 1fr;gap:8px}.row p{margin:0;overflow-wrap:anywhere}</style><section class="facts"><section class="row"><p>Source</p><p>index.html</p></section><section class="row"><p>Stylesheet</p><p>lesson.css</p></section></section>The two content start positions differ because Source and Stylesheet determine separate auto label tracks.
Try the repair
Does a shared parent grid alone force nested child grids to use its tracks?
Show the worked answer
No. The nested grid needs the appropriate subgrid definition and span; independent tracks remain independent.
- Check support and both measured content starts.
- Keep labels readable when text grows inside a fixed track.