CSS Grid 的格式化上下文能达到多远？

网格容器范围限制

在 CSS 网格中，格式化上下文仅限于网格容器内的父子关系。网格属性仅适用于其直接子级。

请考虑以下示例：

<ul>

此处，orgChartLevel1 是网格容器，orgChartLevel1a、orgChartLevel2 和 orgChartLevel2b 是其范围内的子级。

但是，作为网格容器后代的元素，例如作为 orgChartLevel2b，位于网格格式化上下文之外。应用于这些元素的网格属性将不起作用。

解决方案

要将网格属性应用于深度嵌套元素，您必须：

<ul>

将 display: grid 或 display: inline-grid 应用于网格容器内的父级。

删除任何内容网格容器和要应用网格属性的元素之间的包装元素。

注释

<ul>

网格项也可以是网格容器。

有关嵌套 Flex 和网格的更多信息，请参阅下面的附加资源

相关阅读：

<ul>

将深度嵌套的元素放置在更高级别的网格容器中

Flex 属性的正确使用嵌套 Flex 容器时

嵌套 CSS 是不好的做法吗网格？

以上是CSS Grid 的格式化上下文能达到多远？的详细内容。更多信息请关注PHP中文网其他相关文章！