CSS grid-column-end ιδιότητα

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

Η ιδιότητα grid-column-end ορίζει πόσες στήλες θα καλύπτει το αντικείμενο ή στην ποια γραμμή στήλης θα τελειώνει το αντικείμενο (column-line).

Δείτε τα παραδείγματα στο τέλος της σελίδας.

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

Εκμάθηση CSS:Σχεδιασμός Δικτύου CSS

Παράδειγμα

Παράδειγμα 1

Κάντε το "item1" να καλύπτει τρία στήλες:

.item1 {
  grid-column-end: span 3;
}

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

Παράδειγμα 2

Μπορείτε να χρησιμοποιήσετε την τιμή της γραμμής στήλης για να αντικαταστήσετε τον αριθμό των στηλών που θα καλύπτει το αντικείμενο:

.item1 {
  grid-column-end: 3;
}

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

Γλώσσα CSS

grid-column-end: αυτόματα|span n|column-line;

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

Τιμή Περιγραφή
αυτόματα Προεπιλεγμένη τιμή. Το αντικείμενο θα καλύπτει μια στήλη.
span n Ορίζει τον αριθμό των στηλών που θα καλύπτει το αντικείμενο.
column-line Ορίζει σε ποια στήλη να σταματήσει η εμφάνιση του αντικειμένου.

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

Προεπιλεγμένη τιμή: αυτόματα
Κληρονομικότητα: Όχι
Προγραμματισμός κίνησης: Υποστήριξη. Δείτε επίσης:Συνημμένα στοιχεία της κίνησης.
Έκδοση: Μονάδα Σχεδιασμού Δικτύου CSS Grid Level 1
Γλώσσα JavaScript: object.style.gridColumnEnd="5"

Υποστήριξη του περιηγητή

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

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