How Can I Position Grandchildren Within a CSS Grid Container?

Grandchildren of a Grid Container

CSS grid guides suggest that elements positioned in a grid are direct children of the grid element. But what if you want to position an element that is a "grandchild" of the grid?

display: subgrid

The CSS Grid Level 2 draft specification introduces the concept of subgrids. With display: subgrid, a grid item can defer the definition of its rows and columns to its parent grid container. This allows the contents of both grids to align.

However, this feature is not yet implemented in major browsers.

Other Options

In Grid Level 1, only in-flow children of a container become grid items. With display: subgrid on a grid item, the children of the item respect the lines of the container.

Alternatively, you could use display: grid on grid items (nested grid containers) or explore the display: contents workaround described in "What is an alternative to CSS subgrid?"

Resources

• [Subgrids](https://blogs.igalia.com/mrego/2016/02/12/subgrids-thinking-out-loud/)
• [Mozilla Bugzilla](https://bugzilla.mozilla.org/show_bug.cgi?id=1240834)

The above is the detailed content of How Can I Position Grandchildren Within a CSS Grid Container?. For more information, please follow other related articles on the PHP Chinese website!