CSS Grid-də minmax funksiyası

auto-fill ilə birlikdə minmax funksiyasını göstərmək çox rahatdır, bu funksiya sütunların eninin minimum dəyərdən maksimum dəyərə qədər olan diapazonunu təyin edir. Konteynerin eni bütün sütunları yerləşdirmirsə, onların bəziləri yeni sətirə keçəcək, eyni zamanda sətirdəki sütunlar orada bərabər paylanacaq.

Nümunəyə baxaq. Sütunların müxtəlif yerləşdirmə variantlarını görmək üçün səhifənin enini dəyişdirin:

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

Результат: