Minmax-funksjonen i CSS-grid

Det er veldig praktisk sammen med auto-fill å spesifisere funksjonen minmax, som setter et breddeområde for kolonner fra en minimumsverdi til en maksimumsverdi. Hvis containerenes bredde ikke har plass til alle kolonnene, vil noen av dem flyttes ned til en ny rad, mens kolonnene i raden jevnt fordeles i den.

La oss se på et eksempel. For å se forskjellige varianter av plassering av kolonner, endre sidens bredde:

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

Результат: