Les petits-enfants peuvent-ils être directement positionnés sur un conteneur de grille CSS ?

Puis-je positionner les petits-enfants directement sur un conteneur de grille ?

La notion de disposition de grille CSS tourne généralement autour des enfants directs d'un élément de grille positionnés sur la grille. Cependant, que se passe-t-il si nous voulons placer un petit-enfant dans la structure en grille ? Cela a-t-il un sens logique ?

Comprendre "display: subgrid"

CSS Grid Level 2 introduit la propriété "display: subgrid", qui permet aux conteneurs de grille d'étendre leur influence aux éléments imbriqués. Cette propriété :

• Crée une sous-grille au sein de l'élément, ce qui en fait un type spécial de conteneur de grille.
• Hérite des pistes de grille de la grille parent.
• Autorise les enfants de la sous-grille pour participer au dimensionnement de la grille parent.

Mise en place Statut

Malheureusement, display: subgrid n'est pas encore implémenté dans les principaux navigateurs. En raison de cette limitation, nous ne pouvons pas positionner efficacement les petits-enfants sur un conteneur de grille à l'aide de cette propriété.

Limitations de la structure de grille CSS

Dans CSS Grid, seuls les enfants directs d'un conteneur peuvent devenir des éléments de grille et utiliser les propriétés de la grille. Cela signifie que les petits-enfants doivent être positionnés soit par imbrication, soit en utilisant des méthodes alternatives.

Solutions de contournement possibles

Affichage : grille sur les éléments de la grille

Établissement de l'affichage : La grille sur un élément de la grille peut atteindre certaines fonctionnalités limitées, mais cette approche n'est pas entièrement analogue à l'affichage : subgrid.

Display: contents

Une autre solution de contournement potentielle consiste à utiliser display: contents, qui peut hériter de la disposition en grille de son parent. Cette technique est détaillée dans des ressources telles que :

• [Quelle est une alternative à la sous-grille CSS ?](https://stackoverflow.com/questions/42374779/what-is-an-alternative-to -css-subgrid)

Informations supplémentaires

Pour une exploration plus approfondie de ce sujet sujet, reportez-vous aux ressources suivantes :

• [Subgrids Explained](https://blogs.igalia.com/mrego/2016/02/12/subgrids-thinking-out-loud/)
• [Mozilla Bugzilla : Affichage : sous-grille Non Implémenté](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!