Minmax-funktionen i CSS-grid
Det er meget praktisk sammen med auto-fill
at angive funktionen minmax,
som indstiller intervallet for kolonnebredder
fra en minimumsværdi til en maksimumsværdi.
Hvis containerens bredde ikke kan rumme alle
kolonner, vil nogle af dem blive flyttet
ned på en ny række, mens kolonnerne på rækken
bliver jævnt fordelt i den.
Lad os se på et eksempel. For at kunne se forskellige muligheder for placering af kolonner, skal du ændre 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, der demonstrerer
hvordan funktionen minmax virker.
