网格属性无法在网格容器内的元素上工作

Question

我试图在最上面的ul上创建的CSS网格上定位嵌套的li（ul li ul li）。没有爱（它不工作）。也许这是不可能的，或者我错过了什么？

#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>

Answer 1

一个grid formatting context的范围被限制在一个父子关系。

这意味着网格容器始终是父网格，网格物件始终是子网格。网格属性仅适用于这种关系。

儿童以外的网格容器的后代不属于网格布局，也不会接受网格属性。

您正在尝试将网格属性应用于网格容器的后代而非子节点的元素。这些元素超出了网格布局的范围。

底线：为了将栅格属性应用到子项，您将始终需要向父项申请display: grid或display: inline-grid。

请注意，网格项目也可以是网格容器。

（All concepts and rules described above also apply in flexbox.）