Betydningen av auto-fill i CSS-grid

For å etablere størrelsen på like kolonner i grid-containeren er det veldig praktisk å spesifisere verdien auto-fill i funksjonen repeat, ved hjelp av denne vil vår container fylles med like kolonner med ønsket bredde.

La oss lage en tabell med åtte elementer og gi hver kolonne samme bredde på 200px. Samtidig, la verdien auto-fill beregne nødvendig antall kolonner automatisk:

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

Результат: