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:

html<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>

css#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;
}

Результат: