Comment obtenir des lignes à hauteur automatique dans des grilles CSS imbriquées ?

Disposition de grille CSS : lignes à hauteur automatique avec dimensionnement basé sur le contenu

Dans ce scénario, vous disposez d'une conception de grille avec deux grilles imbriquées. Tandis que la grille imbriquée de gauche se comporte comme prévu, la hauteur des lignes de la grille imbriquée de droite est définie pour correspondre à la hauteur des lignes de la grille de gauche.

Définition de la propriété grid-auto-rows sur max- Le contenu dans la grille imbriquée de droite permettra à ses lignes de s'ajuster à la hauteur de leur contenu, résolvant ainsi le problème et garantissant que les deux grilles imbriquées ont des lignes de même taille. hauteur :

.grid-3 {
  grid-auto-rows: max-content;
}

Avec cette modification, les lignes de la grille imbriquée de droite seront automatiquement mises à l'échelle pour s'adapter à leur contenu, en maintenant l'équilibre visuel souhaité entre les deux grilles.

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!