グリッドコンテナ内の要素でグリッドプロパティが機能しない

Question

最上位に作成されたCSSグリッドにli（ul li ul li）のネストを配置しようとしています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>

Answer 1

grid formatting contextの範囲は、親子関係に制限されています。

これは、グリッドコンテナは常に親であり、グリッドアイテムは常に子であることを意味します。グリッドのプロパティは、この関係内でのみ機能します。

子を超えるグリッドコンテナの子孫は、グリッドレイアウトの一部ではなく、グリッドプロパティを受け入れません。

グリッドコンテナの子孫で、子ではない要素にグリッドプロパティを適用しようとしています。これらの要素はグリッドレイアウトの範囲外です。

ボトムライン：子供にグリッドプロパティを適用するには、常にdisplay: gridまたはdisplay: inline-gridを親に適用する必要があります。

グリッドアイテムは、グリッドコンテナでもかまいません。

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