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

Τώρα ας εξετάσουμε την τιμή auto-fit, η οποία χρησιμοποιείται επίσης κατά τον καθορισμό στηλών ίδιου μεγέθους σε συνδυασμό με τη συνάρτηση repeat. Η διαφορά της από την τιμή auto-fill έγκειται στο ότι το auto-fit προσαρμόζει τον αριθμό των στηλών στο διαθέσιμο πλάτος του περιέκτη, επεκτείνοντάς τες ή συμπιέζοντάς τες.

Παράδειγμα

Ας εξετάσουμε τη λειτουργία της τιμής auto-fit σε ένα παράδειγμα ενός περιέκτη με οκτώ στοιχεία. Ας εφαρμόσουμε μαζί με την τιμή auto-fit τη γνωστή σε σας από το προηγούμενο μάθημα συνάρτηση minmax:

<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-fit, minmax(150px, 1fr));
	border: 2px solid #696989;
	padding: 10px;
	width: 600px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Παράδειγμα

Και τώρα ας μειώσουμε το πλάτος του grid container σε 400px:

<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-fit, minmax(150px, 1fr));
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Πρακτικές Ασκήσεις

Ας υποθέσουμε ότι έχετε έναν πίνακα από εννέα στοιχεία. Ορίστε για αυτά, χρησιμοποιώντας την τιμή auto-fit, ένα πλάτος στηλών και ένα πλάτος grid container έτσι ώστε όλα τα θυγατρικά στοιχεία να τοποθετηθούν σε τρεις σειρές.

Και τώρα τροποποιήστε την προηγούμενη άσκηση έτσι, ώστε όλα τα στοιχεία να ταξινομηθούν σε δύο σειρές.