Η σημασία του 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 έτσι ώστε
όλα τα θυγατρικά στοιχεία να τοποθετηθούν σε τρεις σειρές.
Και τώρα τροποποιήστε την προηγούμενη άσκηση έτσι, ώστε όλα τα στοιχεία να ταξινομηθούν σε δύο σειρές.