CSS grid-template-columns ιδιότητα

Ορισμός και χρήση

Το ατрибούτο grid-template-columns καθορίζει τον αριθμό των στηλών και το πλάτος τους στη διάταξη δίκτυου.

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

Δείτε επίσης:

Εκμάθηση CSSCSS Δίκτυο Σχεδιασμού

Οδηγός CSSΑτрибούτο grid-template-rows

Οδηγός CSSΑτрибούτο grid-template

Παράδειγμα

Παράδειγμα 1

Δημιουργήστε ένα κουτί δίκτυου τεσσάρων στηλών:

.grid-container {
  display: grid;
  grid-template-columns: αυτόματα αυτόματα αυτόματα αυτόματα;
}

Προσπαθήστε το μόνοι σας

Παράδειγμα 2

Δημιουργήστε ένα δίκτυο τεσσάρων στηλών και καθορίστε το μέγεθος κάθε στήλης:

.grid-container {
  display: grid;
  grid-template-columns: 30px 200px αυτόματα 100px;
}

Προσπαθήστε το μόνοι σας

Γλώσσα CSS

grid-template-columns: μηδέν|αυτόματα|μεγαλύτερη περιεχόμενο|μικρότερη περιεχόμενο|μήκος|αρχική τιμή|κληρονομικότητα;

Τιμή ιδιότητας

Τιμή Περιγραφή
μηδέν Προεπιλεγμένη τιμή. Δημιουργήστε στηλές όταν χρειάζεται.
αυτόματα Το μέγεθος της στήλης εξαρτάται από το μέγεθος του κουτιού και το μέγεθος του περιεχομένου των στοιχείων στη στήλη.
μεγαλύτερη περιεχόμενο Ρυθμίστε το μέγεθος κάθε στήλης με βάση το μεγαλύτερο στοιχείο στη στήλη.
μικρότερη περιεχόμενο Ρυθμίστε το μέγεθος κάθε στήλης με βάση το μικρότερο στοιχείο στη στήλη.
μήκος Ρυθμίστε το μέγεθος των στηλών χρησιμοποιώντας νόμιμους τιμές μήκους. Δείτε επίσης:Μονάδες μήκους.
αρχική τιμή Ρυθμίστε αυτή την ιδιότητα στη προεπιλεγμένη τιμή. Δείτε επίσης: αρχική τιμή.
κληρονομικότητα Κληρονομείται αυτή η ιδιότητα από το γονικό στοιχείο. Δείτε επίσης: κληρονομικότητα.

Τεχνικές λεπτομέρειες

Προεπιλεγμένη τιμή: μηδέν
Κληρονομικότητα: Όχι
Προσθήκη κίνησης: Υποστήριξη. Δείτε επίσης:Στοιχεία κίνησης.
Έκδοση: CSS Grid Layout Module Level 1
Γλώσσα JavaScript: object.style.gridTemplateColumns="50px 50px 50px"

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

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

Chrome IE / Edge Firefox Safari Opera
57 16 52 10 44