CSS Grid'de minmax Fonksiyonu

auto-fill ile birlikte minmax fonksiyonunu belirtmek çok kullanışlıdır, bu fonksiyon sütun genişlikleri için minimumdan maksimuma bir değer aralığı belirler. Kapsayıcının genişliği tüm sütunları sığdırmıyorsa, bazıları yeni bir satıra taşınacak, bu arada satırdaki sütunlar satır içinde eşit şekilde dağılacaktır.

Bir örnek üzerinde inceleyelim. Sütun yerleşiminin farklı varyasyonlarını görebilmek için sayfa genişliğini değiştirin:

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

Результат: