Die minmax-funksie in CSS-raster
Dit is baie gerieflik om saam met auto-fill
die funksie minmax te spesifiseer,
wat 'n reeks van kolomwydtes stel
van 'n minimum tot 'n maksimum waarde.
As die houer se breedte nie al die
kolomme kan huisves nie, sal sommige van hulle na
'n nuwe ry verskuif, terwyl die kolomme in die ry
eweredig daarin versprei sal word.
Kom ons kyk na 'n voorbeeld. Om verskillende plasings van kolomme te sien, verander asseblief die bladsybreedte:
<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;
}
:
Skryf 'n voorbeeld wat die werking
van die funksie minmax demonstreer.
