Παράδειγμα κειμένου CSS grid-auto-flow

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

Η ιδιότητα grid-auto-flow ελέγχει πώς εισάγονται αυτόματα τα στοιχεία στο δίκτυο.

Επίσης δείτε:

Εκμάθηση CSS:CSS Grid Layout

Παράδειγμα

Παράδειγμα 1

Προσθέστε αυτόματα τοποθετούμενα στοιχεία στήλη προς στήλη:

.grid-container {
  display: grid;
  grid-auto-flow: column;
}

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

Παράδειγμα 2

Γεμίστε όλες τις κενές του δίκτυου προσθέτοντας την τιμή "dense":

.grid-container {
  display: grid;
  grid-auto-flow: row dense;
}

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

Γλώσσα CSS

grid-auto-flow: row|column|dense|row dense|column dense;

Τιμή του χαρακτηριστικού

Τιμή Περιγραφή
row Προεπιλεγμένη τιμή. Τοποθετείτε τα στοιχεία γεμίζοντας κάθε γραμμή.
column Τοποθετείτε τα στοιχεία γεμίζοντας κάθε στήλη.
dense Τοποθετείτε τα στοιχεία γεμίζοντας οποιαδήποτε κενή του δίκτυου.
row dense Τοποθετείτε τα στοιχεία, γεμίζοντας κάθε γραμμή και οποιαδήποτε κενή του δίκτυου.
column dense Τοποθετείτε τα στοιχεία, γεμίζοντας κάθε στήλη και οποιαδήποτε κενή του δίκτυου.

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

Προεπιλεγμένη τιμή: row
Κληρονομικότητα: Όχι
Προσαρμογή της αニμασιών: Υποστήριξη. Εξετάστε:Συνημμένα στοιχεία της αニμασιών.
Έκδοση: CSS Grid Layout Module Level 1
Γλώσσα JavaScript: object.style.gridAutoFlow="row dense"

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

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

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