Jusqu'où va le contexte de formatage de CSS Grid ?

Limites de la portée du conteneur de grille

Dans CSS Grid, le contexte de formatage est limité à la relation parent-enfant au sein d'un conteneur de grille. Les propriétés de la grille ne s'appliquent qu'à ses enfants directs.

Considérons l'exemple suivant :

<ul>

Ici, orgChartLevel1 est le conteneur de grille, et orgChartLevel1a, orgChartLevel2 et orgChartLevel2b sont des enfants dans sa portée.

Cependant, les éléments qui descendent du conteneur de grille, tels que orgChartLevel2b, sont en dehors du contexte de formatage de la grille. Les propriétés de grille appliquées à ces éléments ne fonctionneront pas.

Solution

Pour appliquer les propriétés de grille à des éléments profondément imbriqués, vous devez soit :

<ul>

Appliquer display : grid ou display : inline-grid à un parent dans le conteneur de grille.

Supprimer tous les éléments wrapper entre le conteneur de grille et les éléments auxquels vous souhaitez appliquer les propriétés de la grille.

Notes

<ul>

Les éléments de la grille peuvent également être des conteneurs de grille.

Reportez-vous aux ressources supplémentaires ci-dessous pour plus d'informations sur les conteneurs flexibles et grillagés imbriqués.

Connexe Lecture :

<ul>

Positionner les éléments profondément imbriqués dans un conteneur de grille de niveau supérieur

Utilisation appropriée des propriétés flex lors de l'imbrication de conteneurs flexibles

Est-ce une mauvaise pratique de imbriquer des grilles CSS ?

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!