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

Question

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 ?

Answer 1

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 .

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