Comment « display : subgrid » positionne-t-il les petits-enfants dans une grille CSS ?

Fonctionnalité de sous-grille : positionnement des petits-enfants dans une grille

Dans CSS Grid, les éléments sont généralement des enfants directs du conteneur de grille. Cependant, avec l'introduction de la propriété "display: subgrid", les développeurs peuvent positionner les éléments qui sont des petits-enfants de la grille sur la grille elle-même.

Qu'est-ce que Display: Subgrid ?

La propriété display: subgrid crée un conteneur de sous-grille au sein d'un élément de grille. Cette sous-grille peut hériter de la définition de grille de son parent, permettant ainsi aux éléments de grille qu'elle contient de s'aligner sur les lignes de grille de la grille parent.

Utilisation de l'affichage : sous-grille

Pour positionnez un élément grand-enfant sur la grille parent, définissez l'élément parent sur "display: subgrid" et donnez-lui les propriétés de grille nécessaires. Ensuite, définissez l'élément petit-enfant pour qu'il soit un élément de grille dans la sous-grille.

Par exemple :

<div class="wrapper">
  <div class="parent-grid">

Dans cet exemple, l'élément "parent-grid" est défini sur "display : subgrid" et comporte deux colonnes. L'élément "child-grid" est une sous-grille au sein de la grille parent et comporte deux lignes. Les "éléments petits-enfants" sont des éléments de grille au sein de la grille enfant.

Par conséquent, les éléments A, B et C occuperont chacun leur propre ligne dans la grille parent.

Prise en charge des navigateurs

Affichage : la sous-grille est toujours une fonctionnalité proposée dans la spécification CSS Grid et n'est pas encore largement prise en charge dans les principaux navigateurs. Il est disponible dans Firefox Nightly et Microsoft Edge (avec un drapeau).

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!