Comment ajuster les lignes de la grille CSS à la hauteur du contenu dans les grilles imbriquées ?

Grille CSS - Ajustement de la hauteur des lignes au contenu : contenu maximum pour la hauteur automatique

Lorsque vous travaillez avec des grilles CSS imbriquées, il est possible de rencontrer des situations où la hauteur de l'extérieur Les lignes de la grille influencent les lignes intérieures de la grille, même si elles devraient idéalement s'adapter à la taille de leur contenu. Dans de tels cas, la clé pour obtenir le comportement souhaité consiste à utiliser la propriété CSS grid-auto-rows.

Grilles CSS imbriquées et propagation de la hauteur des lignes

Dans l'extrait de code fourni, nous avons deux conteneurs de grille (div et .grid-2) disposés horizontalement dans un conteneur de grille parent (grid-1). Les colonnes de chaque grille sont définies à l'aide de grid-template-columns, et le placement automatique des lignes est contrôlé par grid-auto-rows.

Par défaut, le conteneur .grid-2 définit grid-auto- les lignes sont automatiquement définies, ce qui signifie que les lignes s'ajustent pour s'adapter à leur contenu. Cependant, le problème se pose avec le conteneur de grille interne .grid-3. Même si grid-auto-rows est également défini sur auto, les hauteurs des lignes de la grille imbriquée sont affectées par les lignes de la grille externe. Cela conduit le côté le plus haut du conteneur .grid-2 à propager sa hauteur au conteneur .grid-3, ce qui entraîne une hauteur de ligne cohérente dans les deux grilles.

Définition des lignes de la grille sur « Max-Content »

Pour résoudre ce problème et ajuster les lignes du conteneur .grid-3 à la taille de leur contenu, nous devons modifier la propriété grid-auto-rows. La valeur max-content, lorsqu'elle est utilisée avec grid-auto-rows, garantit que chaque ligne de la grille interne est dimensionnée en fonction de son contenu, quelle que soit la hauteur des lignes de la grille externe.

En définissant la grille -auto-rows : max-content dans le conteneur interne .grid-3, nous demandons au navigateur de calculer la taille de chaque ligne en fonction uniquement du contenu de cette ligne. Cela permet à la grille intérieure de s'ajuster indépendamment de la grille extérieure, ce qui donne lieu à des lignes qui enveloppent parfaitement leur contenu, comme vous le souhaitez.

Extrait de code mis à jour

Dans l'extrait de code mis à jour ci-dessous, vous pouvez voir la modification des lignes automatiques de grille dans le conteneur interne .grid-3 :

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

Avec cet ajustement, les lignes du Le conteneur .grid-3 s'adaptera dynamiquement à la hauteur de son contenu, obtenant ainsi le comportement de redimensionnement souhaité.

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!