CSS grid-column attribute
- Προηγούμενη Σελίδα grid-auto-rows
- Επόμενη Σελίδα grid-column-end
Ορισμός και χρήση
Η ιδιότητα grid-column καθορίζει το μέγεθος του στοιχείου της πλέγματος και τη θέση του στη διάταξη του πλέγματος και είναι συντομευμένη έκδοση των παρακάτω ιδιοτήτων:
Δείτε επίσης:
Εκμάθηση CSS:CSS Grid Layout
Παράδειγμα
Παράδειγμα 1
Καθορίζει να ξεκινήσει το "item1" από τη στήλη 1 και να καλύπτει δύο στήλες:
.item1 {
grid-column: 1 / span 2;
}
Παράδειγμα 2
Μπορείτε να χρησιμοποιήσετε τιμές γραμμικού ορίου για να αντικαταστήσετε τον αριθμό των στηλών που καλύπτει:
.item1 {
grid-column: 1 / 3;
}
Γλώσσα CSS
grid-column: grid-column-start / grid-column-end;
Τιμή της ιδιότητας
| Τιμή | Περιγραφή |
|---|---|
| grid-column-start | Καθορίζει από ποιή στήλη ξεκινά η εμφάνιση του αντικειμένου. |
| grid-column-end | Καθορίζει ποιό γραμμικό όριο (column-line) σταματά την εμφάνιση του αντικειμένου ή ποιες στήλες καλύπτει. |
Τεχνικές λεπτομέρειες
| Προεπιλεγμένη τιμή: | auto / auto |
|---|---|
| Κληρονομικότητα: | Όχι |
| Παραγωγή κίνησης: | Υποστήριξη. Δείτε επίσης:Πρότυπα κίνησης。 |
| Έκδοση: | CSS Grid Layout Module Level 1 |
| Γλώσσα JavaScript: | object.style.gridColumn="2 / span 2" |
Υποστήριξη του προγράμματος περιήγησης
Τα αριθμοί στην τάβλη αναφέρουν την πρώτη έκδοση του προγράμματος περιήγησης που υποστηρίζει πλήρως αυτήν την ιδιότητα.
| Chrome | IE / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 57 | 16 | 52 | 10 | 44 |
- Προηγούμενη Σελίδα grid-auto-rows
- Επόμενη Σελίδα grid-column-end
