How Does `display: subgrid` Position Grandchildren within a CSS Grid?

Subgrid Feature: Positioning Grandchildren within a Grid

In CSS Grid, elements are typically direct children of the grid container. However, with the introduction of the "display: subgrid" property, developers can position elements that are grandchildren of the grid on the grid itself.

What is Display: Subgrid?

The display: subgrid property creates a subgrid container within a grid item. This subgrid can inherit the grid definition of its parent, allowing grid items within it to align with the grid lines of the parent grid.

Using Display: Subgrid

To position a grandhild element on the parent grid, set the parent element to "display: subgrid" and give it the necessary grid properties. Then, set the grandchild element to be a grid item within the subgrid.

For example:

<div class="wrapper">
  <div class="parent-grid">

In this example, the "parent-grid" element is set to "display: subgrid" and has two columns. The "child-grid" element is a subgrid within the parent grid, and it has two rows. The "grandchild-elements" are grid items within the child-grid.

As a result, elements A, B, and C will each occupy their own row in the parent grid.

Browser Support

Display: subgrid is still a proposed feature in the CSS Grid specification and is not yet widely supported in major browsers. It is available in Firefox Nightly and Microsoft Edge (with a flag).

The above is the detailed content of How Does `display: subgrid` Position Grandchildren within a CSS Grid?. For more information, please follow other related articles on the PHP Chinese website!