Comment puis-je dimensionner automatiquement les lignes de grille CSS imbriquées pour qu'elles correspondent à la hauteur du contenu ?

Grille CSS : dimensionnement automatique des lignes pour s'adapter au contenu

Lors de l'utilisation de grilles CSS imbriquées, il est possible de rencontrer un problème où la hauteur des lignes de la grille imbriquée de droite sont influencés par la grille de gauche, ce qui entraîne des hauteurs incompatibles. Pour résoudre ce problème et ajuster les lignes de droite à la taille du contenu, nous pouvons utiliser la propriété grid-auto-rows: max-content.

Dans l'extrait de code fourni, la grille imbriquée de droite auto-rows : auto définit la hauteur de la ligne à calculer automatiquement en fonction de son contenu. Cependant, comme la grille de gauche comporte plusieurs lignes, la hauteur de la grille de droite est également influencée, ce qui entraîne des hauteurs de lignes inégales.

En modifiant la propriété grid-auto-rows de la grille imbriquée de droite en grid-auto-rows : max-content, nous imposons que la hauteur de la ligne soit définie sur la hauteur du plus grand élément de chaque ligne. Cela garantit que les lignes de la grille imbriquée de droite correspondent aux hauteurs des lignes de la grille de gauche, quelle que soit la taille du contenu.

Vous trouverez ci-dessous le code mis à jour :

.grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-rows: max-content;
}

Avec cette modification, la grille imbriquée de droite les lignes s'ajusteront automatiquement à la taille du contenu, garantissant que les deux grilles ont des lignes de même hauteur.

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!