Κάθε συνηθισμένη ιδιότητα του CSS Grid, ομαδοποιημένη ανάλογα με το πού εφαρμόζεται: στο container, στο στοιχείο και στις μονάδες μεγέθους. Κάθε γραμμή συνδυάζει την ιδιότητα με τις συνηθισμένες τιμές της.
Το Grid τοποθετεί στοιχεία σε δύο διαστάσεις: γραμμές και στήλες ταυτόχρονα. Ορίστε display: grid στο γονικό στοιχείο, καθορίστε τα tracks με grid-template-columns και grid-template-rows και τοποθετήστε τα παιδιά σε κελιά. Χρησιμοποιήστε grid για διατάξεις σελίδων και καρτών· flexbox για μονοδιάστατες μπάρες. Τα δύο συνδυάζονται ελεύθερα.
Πίνακας αναφοράς · 33 καταχωρήσεις
CSS GridExplained
33 of 33 rows
Κοντέινερ
grid | inline-grid
Μετατρέπει το στοιχείο σε grid container.
1fr 1fr | repeat(3, 1fr) | 200px 1fr
Καθορίζει τις στήλες και τα πλάτη τους.
auto 1fr auto
Καθορίζει τις γραμμές και τα ύψη τους.
[main-start] 1fr [main-end]
Ονομάζει γραμμές του grid σε ένα template και τοποθετεί στοιχεία με αυτά τα ονόματα.
1rem | 8px 16px
Κενό μεταξύ γραμμών και στηλών.
"header header" "nav main"
Ονομάζει κελιά για ευανάγνωστη τοποθέτηση.
"head head" 64px "nav main" 1fr / 200px 1fr
Ορίζει γραμμές, στήλες και περιοχές σε μία συντομογραφία.
repeat(2, 1fr) / auto-flow 80px
Ορίζει κάθε ιδιότητα track και το grid-auto-flow σε μία δήλωση.
minmax(80px, auto)
Ορίζει το ύψος των γραμμών που δεν ορίζει το template.
120px | minmax(0, 1fr)
Ορίζει το πλάτος των στηλών που δεν ορίζει το template.
row | column | row dense
Επιλέγει τον άξονα για τα μη τοποθετημένα στοιχεία· το dense συμπληρώνει προηγούμενα κενά.
start | center | end | stretch
Στοιχίζει κάθε στοιχείο μέσα στο κελί του κατά τον άξονα των γραμμών.
start | center | end | stretch
Στοιχίζει κάθε στοιχείο μέσα στο κελί του κατά τον άξονα των στηλών.
center | start end
Ορίζει τα align-items και justify-items σε μία δήλωση.
start | center | space-between
Στοιχίζει το πλέγμα των tracks μέσα στο container κατά τον άξονα των γραμμών.
start | center | space-between
Στοιχίζει το πλέγμα των tracks μέσα στο container κατά τον άξονα των στηλών.
center | end start
Ορίζει τα align-content και justify-content σε μία δήλωση.
Στοιχείο
1 / 3 | span 2
Τοποθετεί ένα στοιχείο σε στήλες ή το εκτείνει σε πολλές.
1 / 2 | span 3
Τοποθετεί ένα στοιχείο σε γραμμές ή το εκτείνει σε πολλές.
grid-column: 2 / -1
Μετράει τις γραμμές από το τέλος του grid· η -1 είναι η τελευταία γραμμή.
header | 1 / 1 / 2 / 3
Ονομάζει ή τοποθετεί πλήρως ένα στοιχείο σε μία συντομογραφία.
start | center | end | stretch
Στοιχίζει μόνο αυτό το στοιχείο μέσα στο κελί του κατά τον άξονα των γραμμών.
start | center | end | stretch
Στοιχίζει μόνο αυτό το στοιχείο μέσα στο κελί του κατά τον άξονα των στηλών.
center | start end
Ορίζει τα align-self και justify-self σε μία δήλωση.
Μονάδες μεγέθους
1fr | 2fr
Ένα κλάσμα του ελεύθερου χώρου στο track.
auto | 1fr auto
Ορίζει το μέγεθος ενός track από το περιεχόμενό του· η στοίχιση μπορεί να το τεντώσει.
min-content | max-content
Ορίζει το μέγεθος ενός track στο μικρότερο ή στο μεγαλύτερο περιεχόμενό του.
fit-content(180px)
Ορίζει το μέγεθος ενός track από το περιεχόμενό του, αλλά ποτέ πέρα από το δοσμένο όριο.
minmax(200px, 1fr)
Περιορίζει ένα track ανάμεσα σε ένα ελάχιστο και ένα μέγιστο.
repeat(4, 1fr)
Επαναλαμβάνει ένα μοτίβο tracks χωρίς να γράφετε το καθένα ξεχωριστά.
repeat(auto-fit, minmax(120px, 1fr))
Προσθέτει όσα tracks χωρούν· το auto-fit συμπτύσσει τα κενά.
grid-template-columns: subgrid
Κάνει ένα εμφωλευμένο grid να μοιράζεται τα tracks και τα ονόματα γραμμών του γονέα.
grid-template-rows: masonry
Πειραματικό: πακετάρει στοιχεία σε στήλες ανά ύψος αντί για σταθερές γραμμές.