Функцијата 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;
}

Результат: