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

Definition and Usage

The grid-template attribute is a shorthand for the following properties:

See also:

CSS Tutorial:Προγράμματα του CSS

CSS Reference Manual:The grid-area attribute

CSS Reference Manual:The grid-template-rows attribute

CSS Reference Manual:The grid-template-columns attribute

CSS Reference Manual:The grid-template-areas attribute

Instance

Example 1

Create a three-column grid layout with the first column 150 pixels high:

.grid-container {
  display: grid;
  grid-template: 150px / auto auto auto;
}

Προσπαθήστε το شخصικά

Παράδειγμα 2

Καθορίζει δύο γραμμές, μεταξύ των οποίων το 'item1' καλύπτει τα δύο πρώτα κολόνες των δύο πρώτων γραμμών (σε ένα πλέγμα πέντε κολόνων):

.item1 {
  grid-area: myArea;
}
.grid-container {
  display: grid;
  grid-template:
    'myArea myArea . . .'
    'myArea myArea . . .';
}

Προσπαθήστε το شخصικά

Παράδειγμα 3

Όνομασε όλα τα στοιχεία και δημιουργήσε ένα έτοιμο μοτίβο ιστοσελίδας:

.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }
.grid-container {
  display: grid;
  grid-template:
    'header header header header header header'
    'menu main main main right right'
    'menu footer footer footer footer';
}

Προσπαθήστε το شخصικά

Γλώσσα CSS

grid-template: none|grid-template-rows / grid-template-columns|grid-template-areas|initial|κληρονομικότητα;
Τιμή χαρακτηριστικού
Τιμή Περιγραφή
μηδέν Προεπιλεγμένη τιμή. Δεν καθορίζει το μέγεθος των στήλων ή των γραμμών.
grid-template-rows / grid-template-columns Καθορίζει το μέγεθος των στήλων και των γραμμών.
grid-template-areas Καθορίζει τη διάταξη της δομής της πλέγματος με ονομασμένα στοιχεία.
initial Ρυθμίστε αυτό το χαρακτηριστικό στη προεπιλεγμένη τιμή του. Δείτε: initial.
κληρονομικότητα Κληρονομείται από το γονικό στοιχείο. Δείτε: κληρονομικότητα.

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

Προεπιλεγμένη τιμή: μηδέν μηδέν μηδέν
Κληρονομικότητα: Όχι
Προσθήκη κινούμενων γραμμάτων: Υποστηρίζεται. Δείτε:Αντιστοιχίες κινούμενων γραμμάτων.
Έκδοση: CSS Grid Layout Module Level 1
Γλώσσα JavaScript: object.style.gridTemplate="250px / auto auto"

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

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

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