Comment puis-je appliquer les propriétés de grille CSS à des éléments profondément imbriqués ?

Contexte de la grille et éléments imbriqués

Dans CSS Grid, les propriétés de la grille sont limitées aux éléments au sein d'une relation parent-enfant. Cela limite l'applicabilité des propriétés de grille aux éléments qui sont directement des enfants d'un conteneur de grille.

Exemple de grille imbriquée

Considérons un scénario dans lequel vous tentez de positionner un objet profondément imbriqué. li utilisant les propriétés de grille appliquées à un ul de niveau supérieur représentant le conteneur de 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;
}

Dans cet exemple, l'élément L'élément li.orgChartLevel2b est un descendant de ul.orgChartLevel1, mais ce n'est pas un enfant direct. Par conséquent, les propriétés de grille définies sur ul.orgChartLevel1 ne s'appliquent pas à li.orgChartLevel2b.

Solution : établir une relation parent-enfant

Pour appliquer les propriétés de grille à des éléments profondément imbriqués éléments, vous devez établir une relation parent-enfant entre l'élément que vous souhaitez styliser et un conteneur de grille. Cela peut être fait soit :

• Application de display: grid ou display: inline-grid à un élément parent entre le conteneur de grille et l'élément souhaité.
• Suppression de tous les éléments wrapper intermédiaires qui bloquent la relation parent-enfant.

Remarque sur les conteneurs de grille dans la grille Objets

Il est important de noter que les éléments de grille eux-mêmes peuvent être des conteneurs de grille. Dans de tels cas, les propriétés de disposition de la grille s'appliquent dans la portée de l'élément de grille défini comme conteneur de grille.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!