De minmax-functie in CSS-grids
Het is erg handig om samen met auto-fill
de functie minmax te specificeren,
die een bereik voor de kolombreedte instelt
van een minimale tot een maximale waarde.
Als de breedte van de container niet alle
kolommen kan bevatten, zullen sommige ervan naar
een nieuwe regel verplaatsen, waarbij de kolommen in de regel
gelijkmatig over de regel worden verdeeld.
Laten we een voorbeeld bekijken. Om verschillende opmaakvarianten van de kolommen te zien, verandert u de breedte van de pagina:
<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;
}
:
Schrijf een voorbeeld dat de werking
van de functie minmax demonstreert.
