Minmax-funktio CSS-gridissä
On erittäin kätevää käyttää auto-fill:n
kanssa minmax-funktiota,
joka asettaa sarakkeiden leveysalueen
minimiarvosta maksimiarvoon.
Jos säiliön leveys ei mahda kaikkia
sarakkeita, jotkut niistä siirtyvät
uudelle riville, samalla kun rivin sarakkeet
jakautuvat tasaisesti riville.
Katsotaanpa esimerkkiä. Nähdäksesi erilaisia sarakkeiden sijoitusvaihtoehtoja vaihda sivun leveyttä:
<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;
}
:
Kirjoita esimerkki, joka osoittaa
minmax-funktion toiminnan.
