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:

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;
}

Результат: