CSS grid-area ιδιότητα

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

Το χαρακτηριστικό grid-area καθορίζει το μέγεθος του στοιχείου του δίκτυου και τη θέση του στο δίκτυο, και είναι συντομευμένη έκδοση των παρακάτω χαρακτηριστικών:

Το χαρακτηριστικό grid-area μπορεί επίσης να χρησιμοποιηθεί για την απονομή ονομάτων στα στοιχεία του δίκτυου. Στη συνέχεια, μπορεί να χρησιμοποιηθεί από τον grid-template-areas Αναφορά χαρακτηριστικών με ονόματα του δίκτυου. Δείτε παρακάτω τα παραδείγματα.

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

Εκμάθηση CSS:Σχολείο CSS Δικτύωσης

Παράδειγμα

Παράδειγμα 1

Καθορίζει την τοποθεσία του "item1" από την γραμμή 2 στη στήλη 1 και διανύει δύο γραμμές και τρεις στήλες:

.item1 {
  grid-area: 2 / 1 / span 2 / span 3;
{}

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

Συμβουλή:Παρέχονται περισσότερες παραδείγματα στο κάτω μέρος της σελίδας.

Γλώσσα CSS

grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end | itemname;

Αξία του χαρακτηριστικού

Τιμή Περιγραφή
grid-row-start Καθορίζει από ποια γραμμή ξεκινά η εμφάνιση του αντικειμένου.
grid-column-start Καθορίζει από ποια στήλη ξεκινά η εμφάνιση του αντικειμένου.
grid-row-end Καθορίζει ποια γραμμή γραμμής θα σταματήσει την εμφάνιση του στοιχείου, ή πόσα γραμμές θα διακρίνει.
grid-column-end Καθορίζει ποια γραμμή γραμμής θα σταματήσει την εμφάνιση του στοιχείου, ή πόσα κελιά θα διακρίνει.
itemname Καθορίζει το στοιχείο του grid item.

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

Προεπιλεγμένη τιμή: auto / auto / auto / auto
Κληρονομικότητα: Όχι
Προσθήκη κίνησης: Υποστήριξη. Δείτε επίσης:Συνημμένα στοιχεία κίνησης.
Έκδοση: Κατανομή Grid CSS Μοντέλο επίπεδο 1
Γλώσσα JavaScript: object.style.gridArea="1 / 2 / span 2 / span 3"

Περισσότερες παραδείξεις

Παράδειγμα 2

Το Item1 ονομάζεται 'myArea' και διαkreμάται σε όλα τα πέντε στήλες στο πέντε στήλων grid layout:

.item1 {
  grid-area: myArea;
{}
.grid-container {
  display: grid;
  grid-template-areas: 'myArea myArea myArea myArea myArea';
{}

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

Παράδειγμα 3

Κάντε το 'myArea' να διαkreμάται σε δύο στήλες σε ένα πέντε στήλων grid layout (το τελείωμα σημαίνει έλλειψη ονόματος για το στοιχείο):

.item1 {
  grid-area: myArea;
{}
.grid-container {
  display: grid;
  grid-template-areas: 'myArea myArea . . .';
{}

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

Παράδειγμα 4

Κάντε το 'item1' να διαkreμάται σε δύο στήλες και δύο γραμμές:

.grid-container {
  grid-template-areas: 'myArea myArea . . .' 'myArea myArea . . .';
{}

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

Παράδειγμα 5

Καλέστε όλες τις εμφανίσεις και δημιουργήστε ένα έτοιμο μοτίβο ιστοσελίδας:

.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }
.grid-container {
  grid-template-areas:
    'header header header header header header'
    'menu main main main right right'
    'menu footer footer footer footer footer';
{}

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

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

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

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