Fungsi minmax dalam Grid CSS
Sangat mudah untuk digunakan bersama dengan auto-fill
adalah dengan menentukan fungsi minmax,
yang mengatur rentang lebar kolom
dari nilai minimum hingga maksimum.
Jika lebar kontainer tidak dapat memuat semua
kolom, maka beberapa di antaranya akan dipindahkan
ke baris baru, sedangkan kolom di dalam baris
akan terdistribusi secara merata di dalamnya.
Mari kita lihat contohnya. Untuk melihat berbagai variasi penempatan kolom, ubah-ubahlah lebar halaman:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
#parent {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
border: 2px solid #696989;
padding: 10px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Tuliskan contoh yang mendemonstrasikan
cara kerja fungsi minmax.
