CSS grid minmax funkcija
Ir ļoti ērti kopā ar auto-fill
norādīt funkciju minmax,
kas nosaka kolonnu platuma diapazonu
no minimālās līdz maksimālajai vērtībai.
Ja konteinera platums nevar ietvert visas
kolonnas, tad dažas no tām pārvietosies
uz jaunu rindu, savukārt kolonnas rindā
tiks vienmērīgi sadalītas tajā.
Apskatīsim piemēru. Lai redzētu dažādās kolonnu izvietošanas iespējas, mainiet lapas platumu:
<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;
}
:
Uzrakstiet piemēru, kas demonstrē
funkcijas minmax darbību.
