CSS gridlerde minmax funksiýasy

Pek amatlylyk bilen, auto-fill bir wagtda minmax funksiýasyny görkezmek, bu funksiýa sütünleriň giňliginiň minimaldan maksimal bahasyna çenli aralygyny belgileýär. Eger konteýneriň giňligi ähli sütünleri syzmazsa, onda olaryň käbirleri täze setire geçer, şol bir wagtyň özünde setirdäki sütünler onda deň derejede paýlanar.

Mysala seredeliň. Sütünleriň ýerleşişiniň durly görnüşlerini görmek üçin sahypanyň giňligini üýtgediň:

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

Результат: