如何在 CSS 网格容器中定位孙子？

网格容器的孙子

CSS 网格指南建议位于网格中的元素是网格元素的直接子元素。但是，如果您想要定位网格的“孙子”元素怎么办？

display: subgrid

CSS Grid Level 2 草案规范引入了子网格的概念。通过 display: subgrid，网格项可以将其行和列的定义推迟到其父网格容器。这允许两个网格的内容对齐。

但是，此功能尚未在主要浏览器中实现。

其他选项

在网格级别 1 中，只有容器的流入子级才会成为网格项。在网格项上使用 display: subgrid 时，该项的子项会尊重容器的线条。

或者，您可以在网格项（嵌套网格容器）上使用 display: grid 或探索 display:contents 解决方法在“什么是 CSS 的替代品”中描述子网格？"

资源

• [子网格](https://blogs.igalia.com/mrego/2016/02/12/subgrids -大声思考/)
• [Mozilla Bugzilla](https://bugzilla.mozilla.org/show_bug.cgi?id=1240834)

以上是如何在 CSS 网格容器中定位孙子？的详细内容。更多信息请关注PHP中文网其他相关文章！