Fungsi minmax dalam Grid CSS
Sangat mudah digunakan bersama auto-fill
untuk menentukan fungsi minmax,
yang menetapkan julat lebar lajur
dari nilai minimum hingga maksimum.
Jika lebar kontena tidak muat untuk semua
lajur, maka sebahagian daripadanya akan berpindah
ke baris baru, dengan lajur dalam baris
tersebut diagihkan secara sama rata.
Mari kita lihat contoh. Untuk melihat pelbagai varian susunan lajur, ubah 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;
}
:
Tulis contoh yang menunjukkan
tugas fungsi minmax.
