Minmax-funktio CSS-gridissä

On erittäin kätevää käyttää auto-fill:n kanssa minmax-funktiota, joka asettaa sarakkeiden leveysalueen minimiarvosta maksimiarvoon. Jos säiliön leveys ei mahda kaikkia sarakkeita, jotkut niistä siirtyvät uudelle riville, samalla kun rivin sarakkeet jakautuvat tasaisesti riville.

Katsotaanpa esimerkkiä. Nähdäksesi erilaisia sarakkeiden sijoitusvaihtoehtoja vaihda sivun leveyttä:

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

Результат: