CSS grid ιδιότητα

定义和用法

grid 属性是以下属性的简写属性：

πρόσθετα:

CSS 教程：CSS Διαδραστικό Σύστημα Διαδικτύου

实例

例子 1

制作一个三列网格布局，其中第一行高 150 像素：

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

Προσπαθήστε το個人ικά

例子 2

规定两行，其中 "item1" 跨越前两行中的前两列（采用五列网格布局）：

.item1 {
  grid-area: myArea;
}
.grid-container {
  display: grid;
  grid:
    '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:
    header header header header header
    'menu main main main right right'
    'menu footer footer footer footer';
}

Προσπαθήστε το個人ικά

Γλώσσα CSS

grid: μηδέν|grid-template-rows / grid-template-columns|grid-template-areas|grid-template-rows / [grid-auto-flow] grid-auto-columns[grid-auto-flow] grid-auto-rows / grid-template-columns|initial|κληρονομικότητα;

Τιμή του ορισμού

Τιμή Περιγραφή
μηδέν Προεπιλεγμένη τιμή. Δεν ορίζονται τα μεγέθη των γραμμών ή των στηλών.
grid-template-rows / grid-template-columns Καθορίζει το μέγεθος των στηλών και των γραμμών.
grid-template-areas Καθορίζει τη δομή του δίκτυου χρησιμοποιώντας ονομαστοί στοιχεία.
grid-template-rows / grid-auto-columns Καθορίζει το μέγεθος των γραμμών (ύψος) και το μέγεθος των στηλών.
grid-auto-rows / grid-template-columns Καθορίζει το μέγεθος των γραμμών (ύψος) και ρυθμίζει το όρισμα grid-template-columns.
grid-template-rows / grid-auto-flow grid-auto-columns Καθορίζει το μέγεθος των γραμμών (ύψος), τον τρόπο τοποθέτησης των αυτομάτως τοποθετούμενων στοιχείων και το μέγεθος των στηλών.
grid-auto-flow grid-auto-rows / grid-template-columns Καθορίζει τον τρόπο τοποθέτησης των αυτομάτως τοποθετούμενων στοιχείων, το μέγεθος των γραμμών και την ρύθμιση του ορισμού grid-template-columns.
initial Αποτεθεί αυτή η ιδιότητα στην προεπιλεγμένη της τιμή. Παρακαλώ δείτε: initial.
κληρονομικότητα Κληρονομείται αυτή η ιδιότητα από το γονικό στοιχείο. Παρακαλώ δείτε: κληρονομικότητα.

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

Προεπιλεγμένη τιμή: μηδέν μηδέν μηδέν αυτόματα αυτόματα γραμμή
Κληρονομικότητα: όχι
Προσαρμογή αнимάσεων: ναι, δείτε τα ατομικά όρισματα. Παρακαλώ δείτε:Αξιώματα σχετικά με τις αнимάσεις.
Έκδοση: CSS Grid Layout Module Level 1
Γλώσσα JavaScript: object.style.grid="250px / auto auto auto"

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

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

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

πρόσθετα:

CSS Εγχειρίδιο Εference:όρισμα grid-template-areas

CSS Εγχειρίδιο Εference:όρισμα grid-template-rows

CSS Εγχειρίδιο Εference:όρισμα grid-template-columns

CSS Εγχειρίδιο Εference:όρισμα grid-auto-rows

CSS Εγχειρίδιο Εference:όρισμα grid-auto-columns

CSS Εγχειρίδιο Εference:όρισμα grid-auto-flow

CSS Εγχειρίδιο Εference:όρισμα grid-row-gap

CSS Εγχειρίδιο Εference:όρισμα grid-column-gap