Betydningen av auto-fill i CSS-grid
For å etablere størrelsen på like kolonner i grid-containeren
er det veldig praktisk å spesifisere
verdien auto-fill i funksjonen repeat,
ved hjelp av denne vil
vår container fylles med like kolonner
med ønsket bredde.
La oss lage en tabell med åtte elementer og
gi hver kolonne samme bredde på 200px.
Samtidig, la verdien auto-fill
beregne nødvendig antall kolonner automatisk:
<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;
}
:
Sett kolonnebredden til 200px.
Endre bredden på forelderen og
se hvordan antallet
kolonner endres.
