Функция minmax в CSS гридове

Много е удобно заедно с auto-fill да се указва функцията minmax, която задава диапазон на ширината на колоните от минимална до максимална стойност. Ако ширината на контейнера не побира всички колони, то някои от тях ще се преместят на нов ред, като колоните в реда ще се разпределят равномерно в него.

Нека да разгледаме пример. За да видите различни варианти на разположение на колоните, променяйте ширината на страницата:

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

Результат: