Η σημασία του auto-fill στα CSS Grid

Για τον καθορισμό του μεγέθους πανομοιότυπων στηλών ενός grid container είναι πολύ βολικό στη συνάρτηση repeat να καθορίζουμε την τιμή auto-fill, χάρη στην οποία ο container μας θα γεμίσει με πανομοιότυπες στήλες του πλάτους που χρειαζόμαστε.

Ας φτιάξουμε έναν πίνακα από οκτώ στοιχεία και ας ορίσουμε σε κάθε στήλη το ίδιο πλάτος σε 200px. Ταυτόχρονα, αφήστε την τιμή auto-fill να υπολογίσει αυτόματα τον απαιτούμενο αριθμό στηλών:

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

Результат: