Minmax-funksjonen i CSS-grid
Det er veldig praktisk sammen med auto-fill
å spesifisere funksjonen minmax,
som setter et breddeområde for kolonner
fra en minimumsverdi til en maksimumsverdi.
Hvis containerenes bredde ikke har plass til alle
kolonnene, vil noen av dem flyttes
ned til en ny rad, mens kolonnene i raden
jevnt fordeles i den.
La oss se på et eksempel. For å se forskjellige varianter av plassering av kolonner, endre sidens bredde:
<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;
}
:
Skriv et eksempel som demonstrerer
hvordan funksjonen minmax fungerer.
