Minmax funktsioon CSS võredes
Väga mugav on koos auto-fill
määrata funktsioon minmax,
mis määrab veergude laiuse vahemiku
minimaalsest kuni maksimaalse väärtuseni.
Kui konteineri laius ei mahu kõik
veerud, siis mõned neist liiguvad
uuele reale, samal ajal kui reas olevad
veerud jaotuvad seal ühtlaselt.
Vaatame näidet. Selleks, et näha erinevaid veergude paigutuse variante muutke lehe laiust:
<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;
}
:
Kirjutage näide, mis demonstreerib
funktsiooni minmax tööd.
