Comment puis-je positionner les petits-enfants dans un conteneur de grille CSS ?

Petits-enfants d'un conteneur de grille

Les guides de grille CSS suggèrent que les éléments positionnés dans une grille sont des enfants directs de l'élément de grille. Mais que se passe-t-il si vous souhaitez positionner un élément qui est un « petit-enfant » de la grille ?

display: subgrid

Le projet de spécification CSS Grid Level 2 introduit le concept de sous-grilles. Avec display: subgrid, un élément de grille peut différer la définition de ses lignes et colonnes à son conteneur de grille parent. Cela permet d'aligner le contenu des deux grilles.

Cependant, cette fonctionnalité n'est pas encore implémentée dans les principaux navigateurs.

Autres options

Au niveau de grille 1, seuls les enfants entrants d'un conteneur deviennent des éléments de grille. Avec display : subgrid sur un élément de la grille, les enfants de l'élément respectent les lignes du conteneur.

Alternativement, vous pouvez utiliser display : grid sur les éléments de la grille (conteneurs de grille imbriqués) ou explorer la solution de contournement display : contents décrit dans "Quelle est une alternative au CSS sous-grille?"

Resources

• [Sous-grilles](https://blogs.igalia.com/mrego/2016/02/12/subgrids -penser à voix haute/)
• [Mozilla Bugzilla](https://bugzilla.mozilla.org/show_bug.cgi?id=1240834)

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!