Gunakan salah satu auto-fillatau auto-fitsebagai nomor pengulangan repeat()notasi.
repeat( [ <positive-integer> | auto-fill | auto-fit ] , <track-list> )
auto-fill
Jika auto-filldiberikan sebagai nomor pengulangan, jika wadah kisi memiliki ukuran tertentu atau ukuran maksimal dalam sumbu yang relevan, maka jumlah pengulangan adalah bilangan bulat positif terbesar yang tidak menyebabkan kisi meluap wadah kisi.
.grid {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fill, 186px);
}
.grid>* {
background-color: green;
height: 200px;
}
<div class="grid">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
Kisi akan mengulangi trek sebanyak mungkin tanpa memenuhi wadahnya.
Dalam kasus ini, dengan contoh di atas (lihat gambar) , hanya 5 track yang dapat masuk ke grid-container tanpa meluap. Hanya ada 4 item di kisi kami, jadi yang kelima dibuat sebagai trek kosong di ruang yang tersisa.
Sisa ruang yang tersisa, trek # 6, mengakhiri kisi eksplisit. Ini berarti tidak ada cukup ruang untuk menempatkan trek lain.
auto-fit
Kata auto-fitkunci berperilaku sama seperti auto-fill, kecuali setelah algoritme penempatan item kisi, trek kosong dalam ruang yang tersisa akan diciutkan 0.
.grid {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fit, 186px);
}
.grid>* {
background-color: green;
height: 200px;
}
<div class="grid">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
Petak akan tetap mengulangi trek sebanyak mungkin tanpa meluap penampungnya, tetapi trek yang kosong akan diciutkan 0.
Track yang diciutkan dianggap memiliki fungsi ukuran track tetap 0px.
Tidak seperti auto-fillcontoh gambar, trek kelima yang kosong diciutkan, mengakhiri kisi eksplisit tepat setelah item ke-4.
auto-fill vs. auto-fit
Perbedaan antara keduanya terlihat ketika minmax()fungsinya digunakan.
Gunakan minmax(186px, 1fr)untuk menyusun item dari 186pxhingga 186pxditambah sebagian kecil dari ruang yang tersisa di wadah kisi.
Saat menggunakan auto-fill, item akan bertambah setelah tidak ada ruang untuk menempatkan track kosong.
.grid {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fill, minmax(186px, 1fr));
}
.grid>* {
background-color: green;
height: 200px;
}
<div class="grid">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
Saat menggunakan auto-fit, item akan bertambah untuk mengisi ruang yang tersisa karena semua trek kosong akan ditutup 0px.
.grid {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fit, minmax(186px, 1fr));
}
.grid>* {
background-color: green;
height: 200px;
}
<div class="grid">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
Tempat bermain:
Memeriksa trek pengisian otomatis
Memeriksa trek pas otomatis
grid-template-columns: auto auto auto auto;apakah bekerja dalam kasus ini? =)