Bolehkah grid-template-rows: Repeat(auto-fill, 80px) boleh digunakan secara bergantian dengan grid-auto-rows: 80px?

Question

Saya mahu grid menambah lebih banyak baris mengikut keperluan semasa menambah kandungan dinamik.

Ini akan menyelesaikan masalah:

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

Saya ingin tahu adakah saya boleh menggunakan grid-template-rows:repeat(auto-fill, 80px);来代替grid-auto-rows: 80px?

Answer 1

Nah, grid-template-rows: Repeat(auto-fill, 80px); adalah berdasarkan spec, tetapi ia tidak memberikan hasil yang diingini. Sebaliknya, ia hanya mencipta baris eksplisit dengan ketinggian 80 piksel dan baris lain mengubah saiz secara automatik.

Walau bagaimanapun, memandangkan anda ingin menambah baris mengikut keperluan, iaitu baris grid yang dibuat secara tersirat, anda harus menggunakan grid-auto-rowsgrid-auto-rows 并且无需使用grid-template-rows dan tidak perlu menggunakan 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>