Betekenis van auto-fill in CSS-rasters
Vir die instelling van die grootte van identiese kolomme van die rasterhouer
is dit baie gerieflik om in die funksie repeat die
waarde auto-fill te spesifiseer, waardeur
ons houer gevul sal word met identiese kolomme
van die verlangde breedte.
Kom ons maak 'n tabel van agt elemente en
ken aan elke kolom 'n identiese breedte van 200px.
Terselfdertyd, laat die waarde auto-fill self
die benodigde aantal kolomme bereken:
<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 die kolombreedte in op 200px.
Verander die breedte van die ouer en
kyk hoe die
aantal kolomme verander.
