CSS `subgrid` is a new and powerful value for `grid-template-columns` and `grid-template-rows`. It allows a nested grid item to align its tracks with its parent grid, making it much easier to create complex layouts where elements deep in the DOM need to line up with elements at a higher level. This visualizer demonstrates the concept: toggle the checkbox to see how the inner blue grid items snap to align with the outer gray grid's columns when `subgrid` is enabled.
▦CSS subgrid Visualizer
1
A
B
C
2
Frequently Asked Questions
What problem does subgrid solve?
Before `subgrid`, if you had a grid inside another grid, the inner grid's tracks were independent. This made it very difficult to align items in the inner grid with items in the outer grid. `subgrid` solves this by making the inner grid adopt the track sizing of its parent.
What is the browser support for subgrid?
`subgrid` is a relatively new feature. It is currently supported in Firefox and is being implemented in Chrome and Safari. Always check a compatibility table like CanIUse.com before using it in production.
