Comment puis-je ajuster les lignes de la grille CSS imbriquées à la taille de leur contenu au lieu d'hériter de la hauteur d'une grille parent ?

Grille CSS : Ajustement des lignes de grille imbriquées à la taille du contenu

Dans le HTML et le CSS fournis, vous avez rencontré un problème où les lignes imbriquées la grille .grid-3 force ses lignes à s'aligner sur la hauteur de la grille imbriquée .grid-2. Pour résoudre ce problème, vous souhaitez que les lignes de .grid-3 s'ajustent à la taille de leur contenu, correspondant ainsi à la hauteur des lignes de .grid-2.

La solution réside dans les lignes automatiques de la grille. propriété. Par défaut, cette propriété est définie sur auto, ce qui répartit l'espace uniformément entre les lignes, quelle que soit la taille de leur contenu. Cependant, dans ce cas, nous avons besoin de lignes qui s'adaptent au contenu.

Pour y parvenir, vous devrez définir grid-auto-rows: max-content sur la grille .grid-3. Cela indique au navigateur de rendre les lignes aussi hautes que leur contenu l'exige, en garantissant qu'elles correspondent à la hauteur des lignes .grid-2.

Voici l'extrait CSS mis à jour :

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

Avec ce changement, les lignes du .grid-3 seront désormais redimensionnées pour s'adapter à leur contenu, correspondant à la hauteur des lignes du .grid-2 tout en conservant entièrement leur contenu. visible.

<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>

Cela montre comment configurer la grille CSS pour garantir que les lignes s'ajustent à la taille de leur contenu, permettant ainsi à différentes grilles de s'aligner de manière transparente les unes sur les autres.

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!