Can Grandchildren Be Directly Positioned on a CSS Grid Container?

Can I Position Grandchildren Directly on a Grid Container?

The notion of CSS Grid layout typically revolves around direct children of a grid element being positioned on the grid. However, what if we want to place a grandchild within the grid structure? Does this make logical sense?

Understanding "display: subgrid"

CSS Grid Level 2 introduces the "display: subgrid" property, which allows grid containers to extend their influence to nested elements. This property:

• Creates a subgrid within the element, making it a special type of grid container.
• Inherits grid tracks from the parent grid.
• Allows children of the subgrid to participate in the sizing of the parent grid.

Implementation Status

Unfortunately, display: subgrid is not yet implemented in major browsers. Due to this limitation, we cannot effectively position grandchildren on a grid container using this property.

Limitations of CSS Grid Structure

Within CSS Grid, only direct children of a container can become grid items and utilize grid properties. This means that grandchildren must either be positioned through nesting or using alternative methods.

Possible Workarounds

Display: grid on Grid Items

Establishing display: grid on a grid item can achieve some limited functionality, but this approach is not fully analogous to display: subgrid.

Display: contents

Another potential workaround involves utilizing display: contents, which can inherit the grid layout of its parent. This technique is detailed in resources such as:

• [What is an alternative to css subgrid?](https://stackoverflow.com/questions/42374779/what-is-an-alternative-to-css-subgrid)

Additional Information

For further exploration of this topic, refer to the following resources:

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

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