CSS grid-gap attribute

定义和用法

grid-gap 属性定义网格布局中行与列之间间隙的尺寸，它是以下属性的简写属性：

Σημείωση:Αυτή η ιδιότητα έχει μετονομαστεί στο CSS3 σε gap.

Για περισσότερες πληροφορίες:

Εκμάθηση CSSCSS Γραφηματική Διάταξη

Εγχειρίδιο CSSΙδιότητα grip-row-gap

Εγχειρίδιο CSSΙδιότητα grip-column-gap

Παράδειγμα

Παράδειγμα 1

Ρύθμιση της συντομευμένης τιμής μεταξύ των γραμμών και των στηλών σε 50 εκατοστά:

.grid-container {
  grid-gap: 50px;
}

Δοκιμάστε το προσωπικά

Παράδειγμα 2

Ρύθμιση του διαστήματος μεταξύ των γραμμών σε 20 εκατοστά, του διαστήματος μεταξύ των στηλών σε 50 εκατοστά:

.grid-container {
  grid-gap: 20px 50px;
}

Δοκιμάστε το προσωπικά

Γλώσσα CSS

grid-gap: grid-row-gap grid-column-gap;

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

Τιμή Περιγραφή
grid-row-gap Ρύθμιση του μεγέθους του διαστήματος μεταξύ των γραμμών του γράφηματος. Η προεπιλεγμένη τιμή είναι 0.
grid-column-gap Ρύθμιση του μεγέθους του διαστήματος μεταξύ των στηλών. Η προεπιλεγμένη τιμή είναι 0.

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

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

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

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

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