Funcția minmax în grid-urile CSS

Este foarte convenabil să specificăm funcția minmax împreună cu auto-fill, care stabilește intervalul lățimii coloanelor de la valoarea minimă până la cea maximă. Dacă lățimea containerului nu poate găzdui toate coloanele, atunci unele dintre ele se vor muta pe un rând nou, iar coloanele de pe rând se vor distribui uniform pe acesta.

Să ne uităm la un exemplu. Pentru a vedea diferite variante de plasare a coloanelor schimbați lățimea paginii:

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

Результат: