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.

Documentation

Specification

Specification link


Specification currently under development in a Working Group

Status in Chromium

Blink>CSS


In development (tracking bug)

Consensus & Standardization

After a feature ships in Chrome, the values listed here are not guaranteed to be up to date.

  • Shipped/Shipping
  • Positive
  • Strongly positive

Owner

Intent to Prototype url

Intent to Prototype thread

Search tags

subgrid, css-grid-2, css,

Last updated on 2022-01-21