Maison > interface Web > tutoriel CSS > Comment puis-je positionner les petits-enfants dans un conteneur de grille CSS ?

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

Mary-Kate Olsen
Libérer: 2024-12-24 22:07:15
original
186 Les gens l'ont consulté

How Can I Position Grandchildren Within a CSS Grid Container?

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal