Pourquoi mes propriétés de grille CSS n'affectent-elles pas les éléments de liste imbriquée ?

Les propriétés de la grille CSS ne s'étendent pas au-delà des éléments de premier niveau

Lors de la définition d'une grille CSS au niveau le plus élevé d'une structure de liste imbriquée, vous pouvez rencontrer des difficultés à appliquer propriétés de la grille aux éléments imbriqués plus profondément dans la liste. Ce problème survient en raison de la portée limitée des contextes de formatage de grille CSS, qui s'étendent uniquement entre les parents et leurs enfants immédiats.

Dans l'exemple fourni, vous avez créé une disposition de grille sur le

avec la classe orgChartLevel1. Vous avez ensuite essayé d'appliquer les propriétés de grille à
• éléments dans un
  (.orgChartLevel2b). Toutefois, ces propriétés ne sont pas appliquées car l'attribut
  • les éléments sont des descendants, et non des enfants, du conteneur de grille.

    Solution :

    Pour appliquer les propriétés de grille aux éléments imbriqués dans un conteneur de grille, vous devez soit :

    1. Attribuer display: grid ou display: inline-grid à l'élément parent de l'élément souhaité éléments.
    2. Supprimez les éléments intermédiaires entre le conteneur de grille et les éléments auxquels vous souhaitez appliquer les propriétés de grille.

    Remarque :

    • Les éléments de grille peuvent également être utilisés comme conteneurs de grille.
    • Consultez les ressources liées pour plus d'informations sur les sujets.

    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!