2017-10-17 21 views
1

J'essaie de positionner un li imbriqué (ul li ul li) sur une grille CSS créée sur le ul le plus haut. Pas encore d'amour (ça ne marche pas). Peut-être que ce n'est pas possible, ou qu'il me manque quelque chose?Les propriétés de grille ne fonctionnent pas sur les éléments à l'intérieur du conteneur de la grille

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

Répondre

4

La portée d'une grid formatting context est limitée à une relation parent-enfant.

Cela signifie qu'un conteneur de la grille est toujours le parent et qu'un élément de la grille est toujours l'enfant. Les propriétés de grille fonctionnent uniquement dans cette relation.

Les descendants d'un conteneur de grille au-delà des enfants ne font pas partie de la disposition de la grille et n'accepteront pas les propriétés de la grille.

Vous essayez d'appliquer des propriétés de grille à des éléments qui sont des descendants, mais pas des enfants, d'un conteneur de grille. Ces éléments sont hors de la portée de la disposition de la grille.

Ligne de fond: Vous aurez toujours besoin d'appliquer display: grid ou display: inline-grid à un parent afin d'appliquer les propriétés de la grille à l'enfant.

Notez que les éléments de la grille peuvent également être des conteneurs de grille.

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

+0

Demi-succès! Tous les navigateurs ont aimé l'approche des grilles imbriquées (li.orgChartLevel1a devient une grille). Maintenant, pour ces règles old-spec embêtantes et les préfixes -ms- pour Edge ... –