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?
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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-rowsdan tidak perlu menggunakangrid-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; }