孙子可以直接定位在 CSS 网格容器上吗？

我可以将孙子直接放置在网格容器上吗？

CSS 网格布局的概念通常围绕放置在网格上的网格元素的直接子元素。但是，如果我们想在网格结构中放置孙子该怎么办？这符合逻辑吗？

理解“display: subgrid”

CSS 网格级别 2 引入了“display: subgrid”属性，该属性允许网格容器将其影响范围扩展到嵌套元素。此属性：

• 在元素内创建子网格，使其成为特殊类型的网格容器。
• 继承父网格的网格轨迹。
• 允许子网格子网格参与父网格的大小调整。

实现Status

不幸的是，display: subgrid 尚未在主流浏览器中实现。由于此限制，我们无法使用此属性在网格容器上有效定位孙子。

CSS 网格结构的限制

在 CSS 网格中，只有容器的直接子级可以成为网格项，并且利用网格属性。这意味着孙子必须通过嵌套或使用替代方法来定位。

可能的解决方法

显示：网格项目上的网格

建立显示： grid 上的网格项可以实现一些有限的功能，但这种方法并不完全类似于显示： subgrid.

Display:contents

另一个潜在的解决方法涉及利用display:contents，它可以继承其父级的网格布局。此技术在以下资源中有详细介绍：

• [CSS 子网格的替代方案是什么？](https://stackoverflow.com/questions/42374779/what-is-an-alternative-to -css-subgrid)

其他信息

进一步探索主题，请参考以下资源：

• [子网格解释](https://blogs.igalia.com/mrego/2016/02/12/subgrids-thinking-out-loud/)
• [Mozilla Bugzilla：显示：子网格不是已实施](https://bugzilla.mozilla.org/show_bug.cgi?id=1240834)

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