Die minmax-funksie in CSS-raster

Dit is baie gerieflik om saam met auto-fill die funksie minmax te spesifiseer, wat 'n reeks van kolomwydtes stel van 'n minimum tot 'n maksimum waarde. As die houer se breedte nie al die kolomme kan huisves nie, sal sommige van hulle na 'n nuwe ry verskuif, terwyl die kolomme in die ry eweredig daarin versprei sal word.

Kom ons kyk na 'n voorbeeld. Om verskillende plasings van kolomme te sien, verander asseblief die bladsybreedte:

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

Результат: