Betydelsen av auto-fill i CSS-grid
För att ställa in storleken på identiska kolumner i en grid-container
är det mycket bekvämt att i funktionen repeat ange
värdet auto-fill, tack vare vilket
vår container fylls med identiska kolumner
med den bredd vi behöver.
Låt oss skapa en tabell med åtta element och
tilldela varje kolumn samma bredd på 200px.
Låt samtidigt värdet auto-fill själv
beräkna det nödvändiga antalet kolumner:
<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;
}
:
Ställ in kolumnbredden till 200px.
Ändra bredden på föräldern och
se hur antalet
kolumner ändras.
