Grid-Eigenschaften nicht auf Elemente innerhalb des Gittercontainers

Question

Ich versuche, eine verschachtelte li (ul li ul li) auf einem CSS-Raster zu positionieren, die auf der obersten ul erstellt wurde. Noch keine Liebe (es funktioniert nicht). Vielleicht ist es nicht möglich, oder ich vermisse etwas?

#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

Der Umfang eines grid formatting context wird auf eine Beziehung Eltern-Kind begrenzt.

Dies bedeutet, dass ein Gittercontainer immer das übergeordnete Element ist und ein Gitterelement immer das untergeordnete Element ist. Gittereigenschaften funktionieren nur innerhalb dieser Beziehung.

Nachkommen eines Gittercontainers außerhalb der untergeordneten Elemente sind nicht Teil des Gitterlayouts und akzeptieren keine Gittereigenschaften.

Sie versuchen, Rastereigenschaften auf Elemente anzuwenden, die zwar untergeordnete, aber nicht untergeordnete Elemente eines Rastercontainers sind. Diese Elemente liegen außerhalb des Grid-Layouts.

Fazit: Sie müssen immer display: grid oder display: inline-grid auf ein übergeordnetes Element anwenden, um Rastereigenschaften auf das untergeordnete Element anzuwenden.

Beachten Sie, dass Gitterelemente auch Gittercontainer sein können.

(All concepts and rules described above also apply in flexbox.)