CSS grid minmax funkcija

Ir ļoti ērti kopā ar auto-fill norādīt funkciju minmax, kas nosaka kolonnu platuma diapazonu no minimālās līdz maksimālajai vērtībai. Ja konteinera platums nevar ietvert visas kolonnas, tad dažas no tām pārvietosies uz jaunu rindu, savukārt kolonnas rindā tiks vienmērīgi sadalītas tajā.

Apskatīsim piemēru. Lai redzētu dažādās kolonnu izvietošanas iespējas, mainiet lapas platumu:

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

Результат: