Die Bedeutung von auto-fill in CSS Grids

Um die Größe gleicher Spalten eines Grid-Containers festzulegen, ist es sehr praktisch, in der Funktion repeat den Wert auto-fill anzugeben, wodurch sich unser Container mit gleichartigen Spalten der gewünschten Breite füllt.

Lassen Sie uns eine Tabelle mit acht Elementen erstellen und jeder Spalte die gleiche Breite von 200px zuweisen. Dabei soll der Wert auto-fill automatisch die benötigte Anzahl an Spalten berechnen:

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

Результат: