Funksioni minmax në CSS Grid
Është shumë i përshtatshëm të përcaktohet funksioni minmax
së bashku me auto-fill,
i cili vendos gamën e gjerësisë së kolonave
nga vlera minimale në atë maksimale.
Nëse gjerësia e kontejnerit nuk mund të përshtatë të gjitha
kolonat, atëherë disa prej tyre do të zhvendosen
në një rresht të ri, ndërsa kolonat në rresht
do të shpërndahen në mënyrë të barabartë.
Le ta shohim me një shembull. Për të parë opsione të ndryshme të vendosjes së kolonave, ndryshoni gjerësinë e faqes:
<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;
}
:
Shkruani një shembull që demonstron
funksionimin e funksionit minmax.
