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:

html<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>

css#parent {
  display: grid;
  grid-template-columns: repeat(auto-fill, 200px);
  border: 2px solid #696989;
  padding: 10px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат: