Funktionen minmax i CSS-grid
Det är mycket bekvämt att tillsammans med auto-fill
ange funktionen minmax,
som sätter ett intervall för kolumnbredder
från ett minimivärde till ett maximivärde.
Om containerns bredd inte rymmer alla
kolumner kommer några av dem att flyttas
ner till en ny rad, medan kolumnerna på raden
kommer att fördelas jämnt i den.
Låt oss titta på ett exempel. För att se olika varianter av kolumnplacering, ändra sidans bredda:
<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 ett exempel som demonstrerar
funktionen minmax.
