Can CSS Grid Position Grandchildren Directly, and How?

CSS Grid: Can You Position "Grandchildren" on the Grid?

Many CSS grid guides imply a structure where grid-positioned elements are direct children of the grid element. However, it may arise when you need to position a "grandchild" element directly on the grid itself.

The Need for "Subgrid"

In a nesting scenario with a grandparent grid, parent container, and grandchild elements, you may want to place each grandchild on its row within the grid. Would this even make sense in grid terminology?

Enter: display: subgrid

From the CSS Grid Level 2 draft spec, we introduce the concept of display: subgrid. Applied to a grid item, display: subgrid allows the item's children to inherit the layout of the container grid while ignoring the item's grid properties.

This feature is not yet widely implemented in browsers. However, it offers a potential solution to the "grandchild" positioning problem.

Alternatives for Now

While waiting for support for display: subgrid, alternative approaches exist:

• Use display: grid on grid items (though limitation exist).
• Employ display: contents to inherit the grid lines vertically.

Additional Resources

• [What is CSS display: subgrid?](https://developer.mozilla.org/en-US/docs/Glossary/display)
• [Subgrids in CSS Grid Level 2](https://blogs.igalia.com/mrego/2016/02/12/subgrids-thinking-out-loud/)
• [display: subgrid for aligning items on grandchild containers](https://bugzilla.mozilla.org/show_bug.cgi?id=1240834)

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