CSS 网格可以直接定位孙子吗？如何定位？

CSS 网格：你能在网格上定位“孙子”吗？

许多 CSS 网格指南暗示了网格定位元素所在的结构网格元素的直接子元素。但是，当您需要将“孙子”元素直接放置在网格本身上时，可能会出现这种情况。

需要“子网格”

在嵌套场景中对于祖父母网格、父容器和孙子元素，您可能希望将每个孙子元素放置在网格内其行上。这在网格术语中有意义吗？

输入：display: subgrid

从 CSS Grid Level 2 草案规范中，我们引入了 display: subgrid 的概念。应用于网格项时，display: subgrid 允许项的子项继承容器网格的布局，同时忽略项的网格属性。

此功能尚未在浏览器中广泛实现。然而，它为“孙子”定位问题提供了一个潜在的解决方案。

现在的替代方案

在等待显示支持时：子网格，存在替代方法：

• 在网格项上使用 display: grid （尽管有限制存在）。
• 使用 display: 内容垂直继承网格线。

其他资源

• [什么是 CSS展示：子网格？](https://developer.mozilla.org/en-US/docs/Glossary/display)
• [CSS 网格级别 2 中的子网格](https://blogs.igalia.com/mrego /2016/02/12/subgrids-thinking-out-loud/)
• [显示：用于对齐孙子项目的子网格容器](https://bugzilla.mozilla.org/show_bug.cgi?id=1240834)

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