← Back to release summary

CSS Subgrid

Category
CSS
Type
Chromium catches up
Status
Enabled by default (Chrome 117)
Intent stage
Prepare to ship

Summary

Implements the CSS Grid Layout Module Level 2 specification, which introduces the concept of a "subgrid" to nested grid containers.

Motivation

The problem CSS Subgrid solves is inheritance within nested grid containers: only direct children of a grid container are aware of its parent's grid properties, e.g., the size of its tracks, the names of each grid line. Whenever web authors work with a grid spanning some area within another grid, the children of the innermost grid are unaware of the outermost grid structure, which could potentially be a disadvantage if authors want those items to be aligned to other descendants of the outermost grid. A "subgrid" is a nested grid container whose row and column definitions are deferred to its parent; with such concept in mind, the problem above is mitigated by inheriting the grid properties and alignment from the spanned grid area in its parent grid.

Standards & signals

Docs: https://docs.google.com/document/d/1cpsCmzdDlXUKtMxOUKIoJFyLH54mLVhZnam_z0PriO0/edit?usp=sharing

View on chromestatus.com