Kuptimi i vlerës auto-fill në CSS Grid
Për të vendosur madhësinë e kolonave identike të kontejnerit grid
është shumë i përshtatshëm të përcaktohet në funksionin repeat
vlera auto-fill, falë së cilës
kontejneri ynë do të mbushet me kolona identike
të gjerësisë që ne dëshirojmë.
Le të krijojmë një tabelë me tetë elementë dhe
të caktojmë për secilën kolonë të njëjtën gjerësi prej 200px.
Në të njëjtën kohë, lejo që vlera auto-fill vetë
të llogarisë numrin e nevojshëm të kolonave:
<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, 200px);
border: 2px solid #696989;
padding: 10px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Caktoni gjerësinë e kolonës në 200px.
Ndryshoni gjerësinë e prindit dhe
shikoni se si ndryshon
numri i kolonave.
