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

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

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

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

#parent {
	display: grid;
	grid-template-columns: repeat(auto-fill, 200px);
	border: 2px solid #696989;
	padding: 10px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Ορίστε το πλάτος της στήλης σε 200px. Αλλάξτε το πλάτος του γονέα και παρατηρήστε πώς αλλάζει ο αριθμός των στηλών.