Comment puis-je faire en sorte que les lignes imbriquées de la grille CSS ajustent automatiquement leur hauteur pour correspondre au contenu ?

Grille CSS : lignes à hauteur automatique, dimensionnement en fonction du contenu

Lorsque vous travaillez avec des grilles CSS imbriquées, il est possible d'obtenir des hauteurs de lignes cohérentes dans les deux grilles. un défi. Dans ce scénario, les lignes de la grille imbriquée de droite sont forcées de correspondre à la hauteur des lignes de la grille imbriquée de gauche, ce qui entraîne un espacement inégal.

Pour résoudre ce problème, vous pouvez utiliser l'outil de grille automatique. rows : propriété max-content pour la grille imbriquée à droite. Cette propriété définit la hauteur de chaque ligne sur la hauteur de son élément enfant le plus haut. En conséquence, les lignes s'ajusteront dynamiquement pour s'adapter au contenu, en alignant les hauteurs avec celles de la grille imbriquée de gauche.

Exemple :

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

Cette modification garantit que chaque ligne de la grille imbriquée de droite est dimensionnée pour s'adapter à son contenu, créant ainsi une hauteur cohérente entre les deux grilles. Voici un extrait mis à jour :

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

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

<div class="grid-2">
  <div class="grid-2">
    <div class="left">L</div>
    <div class="left">L</div>
    <div class="left">L</div>
    <div class="left">L</div>
    <div class="left">L</div>
    <div class="left">L</div>
    <div class="left">L</div>
    <div class="left">L</div>
    <div class="left">L</div>
    <div class="left">L</div>
    <div class="left">L</div>
    <div class="left">L</div>
    <div class="left">L</div>
    <div class="left">L</div>
    <div class="left">L</div>
    <div class="left">L</div>
    <div class="left">L</div>
    <div class="left">L</div>
  </div>
  <div class="grid-3">
    <div class="right">R</div>
    <div class="right">R</div>
    <div class="right">R</div>
    <div class="right">R</div>
    <div class="right">R</div>
    <div class="right">R</div>
    <div class="right">R</div>
    <div class="right">R</div>
    <div class="right">R</div>
    <div class="right">R</div>
    <div class="right">R</div>
    <div class="right">R</div>
    <div class="right">R</div>
  </div>
</div>

Désormais, les lignes des grilles imbriquées de gauche et de droite ajusteront automatiquement leur hauteur, créant des résultats visuellement cohérents.

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!