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

Στα πλέγματα, κατά τον καθορισμό των διαστάσεων των γραμμών και των στηλών, μπορεί να χρησιμοποιηθεί η τιμή auto. Σε αυτήν την περίπτωση, τα μπλοκ απλώς θα γεμίσουν όλο τον διαθέσιμο ελεύθερο χώρο μείον το πλάτος που έχει καθοριστεί σε pixels. Ας δούμε μερικά παραδείγματα.

Ας ορίσουμε για την πρώτη και την τρίτη στήλη ένα σταθερό πλάτος σε pixels, ενώ η δεύτερη στήλη ας πάρει αυτόματα το υπόλοιπο χώρο:

<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: 100px auto 150px;
	border: 2px solid #696989;
	padding: 10px;
	width: 600px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Τοποθετήστε τα θυγατρικά στοιχεία σε δύο στήλες: η πρώτη με πλάτος 200px, και η δεύτερη ας πάρει το υπόλοιπο χώρο.

Τοποθετήστε τα θυγατρικά στοιχεία σε τρεις στήλες: η πρώτη με πλάτος 100px, η δεύτερη 150px, και η τρίτη ας πάρει το υπόλοιπο χώρο.