recherche

Maison  >  Questions et réponses  >  le corps du texte

Grid-template-rows: Repeat(auto-fill, 80px) peut-il être utilisé de manière interchangeable avec grid-auto-rows: 80px ?

Je souhaite que la grille ajoute plus de lignes si nécessaire lors de l'ajout de contenu dynamique.

Cela résoudra le problème :

.grid {
  display: grid;
  grid-template-rows: 80px;
  grid-auto-rows: 80px;
//  grid-template-rows: repeat(auto-fill, 80px);
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  grid-gap: 60px 60px;
}

Je veux savoir si je peux utiliser grid-template-rows:repeat(auto-fill, 80px);来代替grid-auto-rows: 80px ?

P粉823268006P粉823268006509 Il y a quelques jours581

répondre à tous(1)je répondrai

  • P粉627136450

    P粉6271364502023-09-13 13:02:46

    Eh bien, grid-template-rows: Repeat(auto-fill, 80px); est basé sur la spec, mais cela ne donne pas le résultat souhaité. Au lieu de cela, il crée simplement une ligne explicite d'une hauteur de 80 pixels, et les autres lignes sont redimensionnées automatiquement.

    Cependant, puisque vous souhaitez ajouter des lignes selon vos besoins, c'est-à-dire des lignes de grille créées implicitement, vous devez utiliser grid-auto-rowsgrid-auto-rows 并且无需使用grid-template-rows et il n'est pas nécessaire d'utiliser grid-template-rows < /code>. < /p>

    .grid {
      display: grid;
      grid-auto-rows: 80px;
      grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
      gap: 60px;
      }
    
    .grid div {
      background-color: silver;
    }
    <div class="grid">
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    </div>

    répondre
    0
  • Annulerrépondre