Πλέγμα-πρότυπο-στήλες / πλέγμα-πρότυπο-σειρές - CSS-Κόλπα

Οι ιδιότητες grid-template-rowsκαι οι grid-template-columnsιδιότητες είναι οι κύριες ιδιότητες CSS για τη δημιουργία μιας διάταξης πλέγματος, όταν το στοιχείο είναι ένα πλαίσιο πλέγματος ( display: grid;).

Υπάρχουν επίσης -ms-grid-columnsκαι -ms-grid-rows, που είναι η παλιά έκδοση IE αυτού. Ίσως θέλετε να εξετάσετε το ενδεχόμενο αυτόματης επιδιόρθωσης για να λάβετε ή όχι την κλήση σας. Υπήρχε επίσης μια περίεργη περίοδος όπου ήταν grid-definition-columnsκαι grid-definition-rows, αλλά αυτό δεν είναι πλέον κάτι.

Ακολουθεί ένα παράδειγμα που προέρχεται από την τεκμηρίωση της Microsoft:

.grid ( display: grid; grid-template-columns: auto 100px 1fr 2fr; grid-template-rows: 50px 5em min-content auto; )

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

Αυτές οι δύο ιδιότητες υποστηρίζουν μια λίστα τιμών διαχωρισμένων με κενά. Κάθε τιμή θα καθορίσει μια νέα στήλη / σειρά ορίζοντας μια διάσταση. Μια λίστα με 4 τιμές θα έχει ως αποτέλεσμα 4 στήλες / σειρές. Μια μεμονωμένη τιμή θα παράγει μία μόνο στήλη / σειρά.

Αποδεκτές τιμές περιλαμβάνουν μήκους (όπως pxή em), τα ποσοστά, κλάσματα ( fr? Βλέπε παρακάτω), auto(ή fit-content), min-content, max-content, και minmax(), ή η repeat()λειτουργία.

Στο παραπάνω παράδειγμα κώδικα, αυτό σημαίνει:

Στήλη 1 ( αυτόματη λέξη-κλειδί): Η στήλη προσαρμόζεται στο περιεχόμενο της στήλης.
Στήλη 2 ("100 εικονοστοιχεία"): Η στήλη έχει πλάτος 100 εικονοστοιχεία.
Στήλη 3 ("1fr"): Η στήλη καταλαμβάνει μια μονάδα κλάσματος του υπολειπόμενου χώρου.
Στήλη 4 ("2fr"): Η στήλη καταλαμβάνει δύο μονάδες κλάσματος του υπόλοιπου χώρου.

Σειρά 1 ("50 εικονοστοιχεία"): Η σειρά έχει ύψος 50 εικονοστοιχεία.
Σειρά 2 ("5em"): Η σειρά έχει ύψος 5 ems.
Σειρά 3 ( λέξη - κλειδί ελάχιστου περιεχομένου ): Η σειρά είναι τόσο μικρή όσο το περιεχόμενο θα το αφήσει.
Σειρά 4 ( αυτόματη λέξη-κλειδί): Η σειρά προσαρμόζεται στο περιεχόμενο της σειράς.

επαναλαμβάνω()

Η repeat()λειτουργία έχει σχεδιαστεί ειδικά για αυτήν την ενότητα. Σας επιτρέπει να ορίσετε ένα μοτίβο που επαναλαμβάνεται X φορές. Όπως repeat(6, 1fr);. Ας υποθέσουμε ότι θέλετε να κάνετε 12 στήλες ίσου πλάτους που απέχουν μεταξύ τους με περιθώριο 1%. θα μπορούσατε να ορίσετε 1fr repeat(11, 1% 1fr). Είναι το ίδιο όπως 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr.

Η μονάδα FR

Η frμονάδα μπορεί να χρησιμοποιηθεί για grid-rowsκαι grid-columnsτιμές. Σημαίνει «κλάσμα του διαθέσιμου χώρου». Σκεφτείτε το ως ποσοστά διαθέσιμου χώρου όταν έχετε αφαιρέσει στήλες / σειρές σταθερού μεγέθους και βάσει περιεχομένου. Όπως λέει η προδιαγραφή:

Η κατανομή του κλασματικού χώρου συμβαίνει αφού όλα τα μεγέθη γραμμών και στηλών βάσει περιεχομένου έχουν φτάσει στο μέγιστο.

Σχετιζομαι με

Ο καλύτερος πόρος μας για όλα τα πλέγματα CSS είναι ο πλήρης οδηγός μας για το πλέγμα CSS.

Υποστήριξη προγράμματος περιήγησης

Αυτά τα δεδομένα υποστήριξης του προγράμματος περιήγησης προέρχονται από την Caniuse, η οποία έχει περισσότερες λεπτομέρειες. Ένας αριθμός υποδεικνύει ότι το πρόγραμμα περιήγησης υποστηρίζει τη λειτουργία σε αυτήν την έκδοση και νεότερη.