網格屬性無法在網格容器內的元素上工作

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.）