Betydningen af auto-fill i CSS grids
For at indstille størrelsen på ensartede kolonner i grid-containeren
er det meget praktisk at angive
værdien auto-fill i funktionen repeat, takket være hvilken
vores container vil blive fyldt med ensartede kolonner
med den ønskede bredde.
Lad os lave en tabel med otte elementer og
tildele hver kolonne samme bredde på 200px.
Samtidig, lad værdien auto-fill selv
beregne det nødvendige antal kolonner:
<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;
}
:
Indstil kolonnebredden til 200px.
Ændr bredden på forælderen og
se, hvordan
antallet af kolonner ændrer sig.
