De waarde van auto-fill in CSS grids
Voor het instellen van de grootte van identieke kolommen in een grid-container
is het erg handig om in de functie repeat de
waarde auto-fill op te geven, waardoor
onze container wordt gevuld met identieke kolommen
van de gewenste breedte.
Laten we een tabel met acht elementen maken en
elke kolom eenzelfde breedte geven van 200px.
Laat de waarde auto-fill zelf
het benodigde aantal kolommen berekenen:
<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;
}
:
Stel de kolombreedte in op 200px.
Pas de breedte van de ouder aan en
kijk hoe het aantal
kolommen verandert.
