Grid Subgrids: A Way to Position Grandchildren within a Grid Container

While CSS Grid is often depicted as a structure where grid-positioned elements are immediate children of the grid itself, it does offer a mechanism for positioning even "grandchildren" on the grid directly. This is achieved through the display: subgrid property.

Display: Subgrid and Grid Inheritance

According to the CSS Grid Level 2 draft specification, display: subgrid allows a grid item to become a subgrid. This special type of grid container inherits grid parameters from its parent, bypassing its own grid properties and instead adopting the parent's grid tracks.

Practical Implications

With display: subgrid, the children of a grid item can align to the parent grid's lines. This allows grandchildren to be positioned within the grid structure, even though they are not direct descendants of the grid container.

Limitations and Implementation Status

Unfortunately, display: subgrid is not yet supported by major browsers and may not be for some time. Until then, alternative approaches, such as display: grid on grid items or display: contents, can be explored as workarounds.