网格属性不适用于网格容器内的元素
Grid properties not working on elements inside grid container
我正在尝试将嵌套 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>
grid formatting context的范围仅限于父子关系。
这意味着网格容器始终是父项,而网格项始终是子项。网格属性仅在此关系中起作用。
子项之外的网格容器的后代不是网格布局的一部分,不会接受网格属性。
您正在尝试将网格属性应用于网格容器的后代元素,而不是子元素。这些元素不在网格布局的范围内。
底线:您始终需要将 display: grid
或 display: inline-grid
应用于父级,以便将网格属性应用于子级。
请注意,网格项也可以是网格容器。
另见:
我正在尝试将嵌套 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>
grid formatting context的范围仅限于父子关系。
这意味着网格容器始终是父项,而网格项始终是子项。网格属性仅在此关系中起作用。
子项之外的网格容器的后代不是网格布局的一部分,不会接受网格属性。
您正在尝试将网格属性应用于网格容器的后代元素,而不是子元素。这些元素不在网格布局的范围内。
底线:您始终需要将 display: grid
或 display: inline-grid
应用于父级,以便将网格属性应用于子级。
请注意,网格项也可以是网格容器。
另见: