我正在尝试定位嵌套li (ul li ul li）在最顶层创建的 CSS 网格上ul。还没有爱（它不起作用）。也许这是不可能的，或者我错过了什么？
#orgChart ul.orgChartLevel1 {
display: grid;
grid-template-columns: 12px auto;
grid-template-rows: 100px auto auto;
grid-row-gap: 30px;
}
#orgChart li.orgChartLevel2b {
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 2;
grid-row-end: 3;
}
<ul class="orgChartLevel1">
<li class="orgChartLevel1a">
<ul class="orgChartLevel2">
<li class="orgChartLevel2b">
</li>
</ul>
</li>
</ul>
一的范围网格格式化上下文 https://www.w3.org/TR/css3-grid-layout/#grid-model仅限于亲子关系。
这意味着网格容器始终是父级，网格项始终是子级。网格属性仅在此关系内起作用。
子级之外的网格容器的后代不是网格布局的一部分，并且不会接受网格属性。
您正在尝试将网格属性应用于网格容器的后代元素，但不是子元素。这些元素超出了网格布局的范围。
底线：您需要申请display: grid or display: inline-grid到父级以便将网格属性应用于子级。或者，您需要移除网格容器和需要接受网格规则的项目之间的包装。
请注意，网格项也可以是网格容器。
另请参阅：
- 将深度嵌套的元素放置在更高级别的网格容器中 https://stackoverflow.com/q/47929369/3597276
- 嵌套 Flex 容器时正确使用 Flex 属性 https://stackoverflow.com/q/37840646/3597276
- 嵌套 CSS 网格是不好的做法吗？ https://stackoverflow.com/q/52212891/3597276
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
