Betydningen af auto-fill i CSS grids

For at indstille størrelsen på ensartede kolonner i grid-containeren er det meget praktisk at angive værdien auto-fill i funktionen repeat, takket være hvilken vores container vil blive fyldt med ensartede kolonner med den ønskede bredde.

Lad os lave en tabel med otte elementer og tildele hver kolonne samme bredde på 200px. Samtidig, lad værdien auto-fill selv beregne det nødvendige antal kolonner:

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

Результат: