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ň:
<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>
#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;
}
:
minmax funksiýasynyň işini görkezýän
mysal ýazyň.
