Κοινή χρήση τεχνολογίας

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

Εκμάθηση διάταξης πλέγματος CSS

I. Επισκόπηση

Η διάταξη πλέγματος (Grid) είναι η πιο ισχυρή λύση διάταξης CSS.

Χωρίζει τις ιστοσελίδες σε πλέγματα και διαφορετικά πλέγματα μπορούν να συνδυαστούν αυθαίρετα για να δημιουργήσουν διάφορες διατάξεις. Στο παρελθόν, εφέ που μπορούσαν να επιτευχθούν μόνο μέσω πολύπλοκων πλαισίων CSS είναι πλέον ενσωματωμένα σε προγράμματα περιήγησης.

Μια διάταξη όπως αυτή που απεικονίζεται παραπάνω είναι η ειδικότητα της διάταξης πλέγματος.

Η διάταξη πλέγματος έχει ορισμένες ομοιότητες με τη διάταξη Flex, και οι δύο μπορούν να καθορίσουν τη θέση πολλών στοιχείων μέσα στο κοντέινερ. Ωστόσο, υπάρχουν σημαντικές διαφορές.

Η ευέλικτη διάταξη είναι μια διάταξη άξονα και μπορεί να καθορίσει μόνο τη θέση του "αντικειμένου" έναντι του άξονα, η οποία μπορεί να θεωρηθεί ωςΜονοδιάστατη διάταξη . Η διάταξη πλέγματος διαιρεί το κοντέινερ σε "γραμμές" και "στήλες", δημιουργεί κελιά και, στη συνέχεια, καθορίζει το κελί όπου "βρίσκεται το στοιχείο", το οποίο μπορεί να θεωρηθεί ως2D διάταξη . Η διάταξη πλέγματος είναι πολύ πιο ισχυρή από τη διάταξη Flex.

2. Βασικές έννοιες

Πριν μάθετε τη διάταξη πλέγματος, πρέπει να κατανοήσετε μερικές βασικές έννοιες.

2.1 Εμπορευματοκιβώτια και έργα

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

<div>
  <div><p>1</p></div>
  <div><p>2</p></div>
  <div><p>3</p></div>
</div>
1
2
3
4
5

Στον παραπάνω κώδικα, το εξώτερο<div>Το στοιχείο είναι το δοχείο και τα τρία εσωτερικά<div>Τα στοιχεία είναι στοιχεία.

Ειδοποίηση: Το έργο μπορεί να είναι μόνο το θυγατρικό στοιχείο ανώτατου επιπέδου του κοντέινερ και δεν περιλαμβάνει τα θυγατρικά στοιχεία του έργου, όπως ο παραπάνω κωδικός<p> Τα στοιχεία δεν είναι στοιχεία. Η διάταξη πλέγματος ισχύει μόνο για έργα.

2.2 Γραμμές και στήλες

Η οριζόντια περιοχή μέσα στο δοχείο ονομάζεται "σειρά" και η κατακόρυφη περιοχή ονομάζεται "στήλη".

Στην παραπάνω εικόνα, οι οριζόντιες σκοτεινές περιοχές είναι "σειρές" και οι κάθετες σκοτεινές περιοχές είναι "στήλες".

2.3 Κύτταρα

Η περιοχή τομής γραμμών και στηλών ονομάζεται "κελί".

Υπό κανονικές συνθήκες,nεντάξει καιmστήλες θα παράγουνn x m κύτταρα. Για παράδειγμα, 3 σειρές και 3 στήλες θα παράγουν 9 κελιά.

2.4 Γραμμές πλέγματος

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

Υπό κανονικές συνθήκες,nΕντάξειn + 1ριζική οριζόντια γραμμή πλέγματος,mΠαρατίθεταιm + 1Υπάρχουν τρεις κάθετες γραμμές πλέγματος, για παράδειγμα, υπάρχουν τέσσερις οριζόντιες γραμμές πλέγματος σε τρεις σειρές.

Η παραπάνω εικόνα είναι ένα πλέγμα 4 x 4 με συνολικά 5 οριζόντιες γραμμές πλέγματος και 5 κάθετες γραμμές πλέγματος.

3. Ιδιότητες κοντέινερ

Οι ιδιότητες του Grid layout χωρίζονται σε δύο κατηγορίες. Ο ένας τύπος ορίζεται στο κοντέινερ και ονομάζεται ιδιότητες κοντέινερ ο άλλος τύπος ορίζεται στο έργο και ονομάζεται ιδιότητες έργου. Αυτό το μέρος εισάγει αρχικά τις ιδιότητες του κοντέινερ.

3.1 χαρακτηριστικό εμφάνισης

display: gridΚαθορίζει ένα κοντέινερ για χρήση διάταξης πλέγματος.

div {
  display: grid;
}
1
2
3

Η παραπάνω εικόνα είναιdisplay: gridτουΑποτέλεσμα。

Από προεπιλογή, τα στοιχεία κοντέινερ είναι στοιχεία σε επίπεδο μπλοκ, αλλά μπορούν επίσης να οριστούν σε ενσωματωμένα στοιχεία.

div {
  display: inline-grid;
}
1
2
3

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

Η παραπάνω εικόνα είναιdisplay: inline-gridτουΑποτέλεσμα。

Σημειώστε ότι μετά τη ρύθμιση στη διάταξη πλέγματος, τα υποστοιχεία κοντέινερ (στοιχεία)float、display: inline-block、display: table-cell、vertical-alignκαιcolumn-*Όλες οι άλλες ρυθμίσεις δεν θα είναι έγκυρες.

3.2 χαρακτηριστικό grid-template-columns, χαρακτηριστικό grid-template-rows

Αφού το κοντέινερ καθορίσει τη διάταξη πλέγματος, πρέπει στη συνέχεια να διαιρέσει τις γραμμές και τις στήλες.grid-template-columnsΟι ιδιότητες ορίζουν το πλάτος της στήλης κάθε στήλης,grid-template-rowsΗ ιδιότητα ορίζει το ύψος της σειράς κάθε σειράς.

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
}
1
2
3
4
5

παραπάνω κωδικόςΚαθορίζει ένα πλέγμα με τρεις σειρές και τρεις στήλες Το πλάτος και το ύψος της στήλης είναι και τα δύο100px。

Αντί να χρησιμοποιείτε απόλυτες μονάδες, μπορείτε επίσης να χρησιμοποιήσετε ποσοστά.

.container {
  display: grid;
  grid-template-columns: 33.33% 33.33% 33.33%;
  grid-template-rows: 33.33% 33.33% 33.33%;
}
1
2
3
4
5

(1) επανάληψη ()

Μερικές φορές, είναι πολύ ενοχλητικό να γράφετε την ίδια τιμή επανειλημμένα, ειδικά όταν υπάρχουν πολλά πλέγματα.Αυτή τη στιγμή, μπορείτε να χρησιμοποιήσετεrepeat() Λειτουργία που απλοποιεί επαναλαμβανόμενες τιμές.Ο παραπάνω κώδικας χρησιμοποιείrepeat()Ξαναγράφτηκε ως εξής.

.container {
  display: grid;
  grid-template-columns: repeat(3, 33.33%);
  grid-template-rows: repeat(3, 33.33%);
}
1
2
3
4
5

repeat()Δέχεται δύο παραμέτρους, η πρώτη παράμετρος είναι ο αριθμός των επαναλήψεων (3 στο παραπάνω παράδειγμα) και η δεύτερη παράμετρος είναι η τιμή που πρέπει να επαναληφθεί.

repeat()Είναι εντάξει να επαναλάβετε ένα μοτίβο.

grid-template-columns: repeat(2, 100px 20px 80px);
1

παραπάνω κωδικόςΟρίζονται 6 στήλες, το πλάτος της πρώτης και της τέταρτης στήλης είναι100px, η δεύτερη και η πέμπτη στήλη20px, η τρίτη στήλη και η έκτη στήλη80px。

(2) αυτόματη συμπλήρωση λέξης-κλειδιού

Μερικές φορές, το μέγεθος του κελιού είναι σταθερό, αλλά το μέγεθος του δοχείου είναι απροσδιόριστο.Εάν θέλετε κάθε γραμμή (ή στήλη) να χωράει όσο το δυνατόν περισσότερα κελιά, μπορείτε να χρησιμοποιήσετεauto-fillΟι λέξεις-κλειδιά αντιπροσωπεύουν την αυτόματη συμπλήρωση.

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, 100px);
}
1
2
3
4

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

Εκτός απόauto-fill, και μια λέξη-κλειδίauto-fit , η συμπεριφορά και των δύο είναι βασικά ίδια.Μόνο όταν το κοντέινερ είναι αρκετά φαρδύ ώστε να χωράει όλα τα κελιά σε μία σειρά και το πλάτος του κελιού δεν είναι σταθερόδιαφορές συμπεριφοράς：auto-fillΤο υπόλοιπο πλάτος θα γεμίσει με κενά κελιά.auto-fitθα προσπαθήσει να επεκτείνει το πλάτος του κελιού.

(3) fr λέξη-κλειδί

Προκειμένου να εκφραστούν εύκολα οι αναλογικές σχέσεις, η διάταξη πλέγματος παρέχειfr Λέξη-κλειδί (συντομογραφία για το fraction, που σημαίνει "θραύσμα").Αν τα πλάτη των δύο στηλών είναι1frκαι2fr, που σημαίνει ότι το δεύτερο είναι διπλάσιο από το πρώτο.

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
1
2
3
4

παραπάνω κωδικόςΑντιπροσωπεύει δύο στήλες του ίδιου πλάτους.

frΜπορεί να χρησιμοποιηθεί σε συνδυασμό με μονάδες απόλυτου μήκους, κάτι που είναι πολύ βολικό.

.container {
  display: grid;
  grid-template-columns: 150px 1fr 2fr;
}
1
2
3
4

παραπάνω κωδικόςσημαίνει ότι η πρώτη στήλη έχει πλάτος 150 pixel και η δεύτερη στήλη έχει το μισό πλάτος από την τρίτη στήλη.

(4) ελάχιστη μέγιστη()

minmax() Η συνάρτηση παράγει ένα εύρος μήκους, υποδεικνύοντας ότι το μήκος είναι εντός αυτού του εύρους. Δέχεται δύο παραμέτρους, την ελάχιστη τιμή και τη μέγιστη τιμή.

grid-template-columns: 1fr 1fr minmax(100px, 1fr);
1

Στον παραπάνω κώδικα,minmax(100px, 1fr)Υποδεικνύει ότι το πλάτος της στήλης δεν είναι μικρότερο από100px, όχι μεγαλύτερο από1fr。

(5) αυτόματη λέξη-κλειδί

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

grid-template-columns: 100px auto 100px;
1

Στον παραπάνω κώδικα, το πλάτος της δεύτερης στήλης είναι βασικά ίσο με το μέγιστο πλάτος του κελιού στη στήλη, εκτός αν έχει οριστεί το περιεχόμενο κελιούmin-width, και αυτή η τιμή είναι μεγαλύτερη από το μέγιστο πλάτος.

(6) Όνομα γραμμών πλέγματος

grid-template-columnsιδιότητες καιgrid-template-rowsΣτις ιδιότητες, μπορείτε επίσης να χρησιμοποιήσετε αγκύλες για να καθορίσετε το όνομα κάθε γραμμής πλέγματος για εύκολη αναφορά στο μέλλον.

.container {
  display: grid;
  grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];
  grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4];
}
1
2
3
4
5

Ο παραπάνω κώδικας καθορίζει μια διάταξη πλέγματος 3 σειρών x 3 στηλών, επομένως υπάρχουν 4 κάθετες γραμμές πλέγματος και 4 οριζόντιες γραμμές πλέγματος. Μέσα στις αγκύλες αναγράφονται τα ονόματα των οκτώ γραμμών.

Η διάταξη πλέγματος επιτρέπει πολλά ονόματα για την ίδια γραμμή, όπως π.χ[fifth-line row-5]。

(7) Παράδειγμα διάταξης

grid-template-columns Οι ιδιότητες είναι πολύ χρήσιμες για τη διάταξη ιστοσελίδων. Η διάταξη δύο στηλών απαιτεί μόνο μία γραμμή κώδικα.

.wrapper {
  display: grid;
  grid-template-columns: 70% 30%;
}
1
2
3
4

Ο παραπάνω κωδικός ορίζει την αριστερή στήλη στο 70% και τη δεξιά στήλη στο 30%.

Η παραδοσιακή διάταξη δώδεκα δικτύων είναι επίσης εύκολη στην εγγραφή.

grid-template-columns: repeat(12, 1fr);
1

3.3 χαρακτηριστικό grid-row-gap, grid-column-gap χαρακτηριστικό, grid-gap χαρακτηριστικό

grid-row-gapΗ ιδιότητα ορίζει την απόσταση μεταξύ των σειρών (διάστημα γραμμών),grid-column-gapΗ ιδιότητα ορίζει την απόσταση μεταξύ των στηλών (διάστημα στηλών).

.container {
  grid-row-gap: 20px;
  grid-column-gap: 20px;
}
1
2
3
4

παραπάνω κωδικόςΜέσης,grid-row-gapΧρησιμοποιείται για τον καθορισμό της απόστασης γραμμών,grid-column-gapΧρησιμοποιείται για τον ορισμό της απόστασης στηλών.

grid-gapΤα ακίνητα είναιgrid-column-gapκαιgrid-row-gapΗ συνδυασμένη συντομογραφία του , η σύνταξη έχει ως εξής.

grid-gap: <grid-row-gap> <grid-column-gap>;
1

Επομένως, το παραπάνω κομμάτι κώδικα CSS είναι ισοδύναμο με τον ακόλουθο κώδικα.

.container {
  grid-gap: 20px 20px;
}
1
2
3

ανgrid-gapΗ δεύτερη τιμή παραλείπεται και το πρόγραμμα περιήγησης θεωρεί τη δεύτερη τιμή ίση με την πρώτη τιμή.

Σύμφωνα με τα πιο πρόσφατα πρότυπα, τα τρία παραπάνω ονόματα χαρακτηριστικώνgrid-Το πρόθεμα έχει αφαιρεθεί,grid-column-gapκαιgrid-row-gapγραμμένο ωςcolumn-gapκαιrow-gap，grid-gapγραμμένο ωςgap。

3.4 ιδιοκτησία πλέγματος-πρότυπο-περιοχών

Η διάταξη πλέγματος σάς επιτρέπει να καθορίσετε "περιοχές", οι οποίες αποτελούνται από μεμονωμένα ή πολλαπλά κελιά.grid-template-areasΟι ιδιότητες χρησιμοποιούνται για τον καθορισμό περιοχών.

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
  grid-template-areas:
    'a b c'
    'd e f'
    'g h i';
}
1
2
3
4
5
6
7
8
9

Ο παραπάνω κώδικας πρώτα διαιρεί 9 κελιά και στη συνέχεια τα ονομάζειaφθάνωiΟι εννέα περιοχές αντιστοιχούν σε αυτά τα εννέα κύτταρα αντίστοιχα.

Η μέθοδος γραφής συγχώνευσης πολλαπλών κελιών σε μια περιοχή είναι η εξής.

grid-template-areas:
  'a a a'
  'b b b'
  'c c c';
1
2
3
4

Ο παραπάνω κώδικας χωρίζει 9 κελιά σεa、b、cτρεις περιοχές.

Παρακάτω είναι ένα παράδειγμα διάταξης.

grid-template-areas:
  'header header header'
  'main main sidebar'
  'footer footer footer';
1
2
3
4

Στον παραπάνω κώδικα, το επάνω μέρος είναι η περιοχή της κεφαλίδαςheader, το κάτω μέρος είναι η περιοχή του υποσέλιδουfooter, το μεσαίο τμήμα είναιmainκαιsidebar。

Εάν ορισμένες περιοχές δεν χρειάζεται να αξιοποιηθούν, χρησιμοποιήστε "σημεία" (.)εξπρές.

grid-template-areas:
  'a . c'
  'd . f'
  'g . i';
1
2
3
4

Στον παραπάνω κώδικα, η μεσαία στήλη είναι μια τελεία, που σημαίνει ότι το κελί δεν χρησιμοποιείται ή το κελί δεν ανήκει σε καμία περιοχή.

Σημειώστε ότι η ονομασία των περιοχών επηρεάζει τις γραμμές πλέγματος.Η αρχική γραμμή πλέγματος κάθε περιοχής ονομάζεται αυτόματα区域名-start, η τερματική γραμμή πλέγματος ονομάζεται αυτόματα区域名-end。

Για παράδειγμα, η περιοχή ονομάζεταιheader, τότε καλούνται οι οριζόντιες γραμμές πλέγματος και οι κάθετες γραμμές πλέγματος στην αρχική θέσηheader-start, καλούνται οι οριζόντιες γραμμές πλέγματος και οι κάθετες γραμμές πλέγματος στην τελική θέσηheader-end。

3.5 χαρακτηριστικό grid-auto-flow

Αφού χωριστεί το πλέγμα, τα θυγατρικά στοιχεία του κοντέινερ θα τοποθετηθούν αυτόματα σε κάθε πλέγμα με τη σειρά. Η προεπιλεγμένη σειρά τοποθέτησης είναι "πρώτη σειρά, δεύτερη στήλη", δηλαδή, συμπληρώστε πρώτα την πρώτη σειρά και, στη συνέχεια, ξεκινήστε να τοποθετείτε τη δεύτερη σειρά, η οποία είναι η σειρά των αριθμών στο παρακάτω σχήμα.

Αυτή η εντολή δίνεται απόgrid-auto-flowΚαθορίζεται από το χαρακτηριστικό, η προεπιλεγμένη τιμή είναιrow , δηλαδή «πρώτα σειρά, μετά σειρά».Μπορείτε επίσης να το ρυθμίσετε σεcolumn, γίνεται "πρώτα γραμμή και μετά σειρά".

grid-auto-flow: column;
1

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

grid-auto-flowΕκτός από τη ρύθμιση της ιδιότητας σεrowκαιcolumn, μπορεί επίσης να ρυθμιστεί σεrow denseκαιcolumn dense . Αυτές οι δύο τιμές χρησιμοποιούνται κυρίως για την αυτόματη τοποθέτηση των υπόλοιπων στοιχείων μετά την εκχώρηση θέσεων σε ορισμένα στοιχεία.

Παράδειγμα παρακάτωΑφήστε το έργο Νο. 1 και το έργο Νο. 2 να καταλαμβάνουν δύο κελιά το καθένα και, στη συνέχεια, στην προεπιλογήgrid-auto-flow: rowΣε αυτήν την περίπτωση, θα δημιουργηθεί η ακόλουθη διάταξη.

Στην παραπάνω εικόνα, η θέση πίσω από το στοιχείο No.

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

grid-auto-flow: row dense;
1

παραπάνω κωδικόςΤο αποτέλεσμα είναι το εξής.

Η παραπάνω εικόνα θα γεμίσει πρώτα την πρώτη σειρά και μετά τη δεύτερη σειρά, επομένως το στοιχείο 3 θα ακολουθήσει το στοιχείο 1. Τα είδη Νο. 8 και Νο. 9 θα τοποθετηθούν στην τέταρτη σειρά.

Εάν αλλάξετε τη ρύθμιση σεcolumn dense, σημαίνει «πρώτα στήλη και μετά σειρά» και συμπληρώστε τα κενά όσο το δυνατόν περισσότερο.

grid-auto-flow: column dense;
1

παραπάνω κωδικόςΤο αποτέλεσμα είναι το εξής.

Η παραπάνω εικόνα θα γεμίσει πρώτα την πρώτη στήλη και μετά τη δεύτερη στήλη, επομένως το στοιχείο Νο. 3 βρίσκεται στην πρώτη στήλη και το στοιχείο Νο. 4 στη δεύτερη στήλη. Τα στοιχεία 8 και 9 συμπιέστηκαν στην τέταρτη στήλη.

3.6 χαρακτηριστικό justify-items, align-item χαρακτηριστικό, place-item χαρακτηριστικό

justify-itemsΗ ιδιότητα ορίζει την οριζόντια θέση του περιεχομένου του κελιού (αριστερά, κέντρο, δεξιά),align-itemsΗ ιδιότητα ορίζει την κατακόρυφη θέση (πάνω, μέση, κάτω) του περιεχομένου κελιού.

.container {
  justify-items: start | end | center | stretch;
  align-items: start | end | center | stretch;
}
1
2
3
4

Αυτά τα δύο χαρακτηριστικά γράφονται ακριβώς το ίδιο και μπορούν να λάβουν τις ακόλουθες τιμές.

• start: ευθυγραμμίστε την αρχική άκρη του κελιού.
• τέλος: Ευθυγράμμιση στην ακραία άκρη του κελιού.
• κέντρο: Κέντρο μέσα στο κελί.
• stretch: τέντωμα για να γεμίσει ολόκληρο το πλάτος του κελιού (προεπιλεγμένη τιμή).

.container {
  justify-items: start;
}
1
2
3

παραπάνω κωδικόςΥποδεικνύει ότι το περιεχόμενο του κελιού είναι ευθυγραμμισμένο προς τα αριστερά και το αποτέλεσμα είναι όπως φαίνεται παρακάτω.

.container {
  align-items: start;
}
1
2
3

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

place-itemsΤα ακίνητα είναιalign-itemsιδιότητες καιjustify-itemsΗ συνδυασμένη στενογραφία του ακινήτου.

place-items: <align-items> <justify-items>;
1

Παρακάτω είναι ένα παράδειγμα.

place-items: start end;
1

Εάν η δεύτερη τιμή παραλειφθεί, το πρόγραμμα περιήγησης τη θεωρεί ίση με την πρώτη τιμή.

3.7 χαρακτηριστικό justify-content, align-content χαρακτηριστικό, place-content χαρακτηριστικό

justify-contentΤο χαρακτηριστικό είναι η οριζόντια θέση ολόκληρης της περιοχής περιεχομένου μέσα στο κοντέινερ (αριστερά, κέντρο, δεξιά),align-contentΤο χαρακτηριστικό είναι η κατακόρυφη θέση ολόκληρης της περιοχής περιεχομένου (πάνω, μέση, κάτω).

.container {
  justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
  align-content: start | end | center | stretch | space-around | space-between | space-evenly;
}
1
2
3
4

Αυτά τα δύο χαρακτηριστικά γράφονται ακριβώς το ίδιο και μπορούν να λάβουν τις ακόλουθες τιμές. (Οι παρακάτω εικόνες βασίζονται όλες σεjustify-contentΓια παράδειγμα, ιδιότητεςalign-content Το διάγραμμα χαρακτηριστικών είναι ακριβώς το ίδιο, με τη διαφορά ότι ο οριζόντιος προσανατολισμός αλλάζει σε κατακόρυφο. )

• start - το αρχικό περίγραμμα του ευθυγραμμισμένου κοντέινερ.
  
• τέλος - ευθυγραμμίζει το άκρο του κοντέινερ.
  
• κέντρο - Κεντράρετε το δοχείο μέσα.
  
• τέντωμα - Όταν το μέγεθος του αντικειμένου δεν έχει καθοριστεί, τεντώστε το για να καταλάβετε ολόκληρο το δοχείο πλέγματος.
  
• space-round - ίσος χώρος και στις δύο πλευρές κάθε στοιχείου. Επομένως, το διάστημα μεταξύ των στοιχείων είναι διπλάσιο από το διάστημα μεταξύ των στοιχείων και του περιγράμματος του κοντέινερ.
  
• space-between - Υπάρχει ίσος χώρος μεταξύ των στοιχείων και δεν υπάρχει κενό μεταξύ των στοιχείων και του περιγράμματος του κοντέινερ.
  
• ομοιόμορφο διάστημα - Το διάστημα μεταξύ των στοιχείων είναι ίσο και το διάστημα μεταξύ των στοιχείων και του περιγράμματος του κοντέινερ είναι το ίδιο μήκος.
  
  place-contentΤα ακίνητα είναιalign-contentιδιότητες καιjustify-contentΗ συνδυασμένη στενογραφία του ακινήτου.

place-content: <align-content> <justify-content>;
1

Παρακάτω είναι ένα παράδειγμα.

place-content: space-around space-evenly;
1

Εάν παραλείψετε τη δεύτερη τιμή, το πρόγραμμα περιήγησης υποθέτει ότι η δεύτερη τιμή είναι ίση με την πρώτη τιμή.

3.8 ιδιότητα πλέγμα-αυτόματες στήλες, ιδιότητα πλέγμα-αυτόματες σειρές

Μερικές φορές, σε ορισμένα στοιχεία εκχωρούνται θέσεις εκτός του υπάρχοντος πλέγματος. Για παράδειγμα, το πλέγμα έχει μόνο 3 στήλες, αλλά ένα συγκεκριμένο στοιχείο καθορίζεται στην 5η σειρά. Αυτή τη στιγμή, το πρόγραμμα περιήγησης θα δημιουργήσει αυτόματα επιπλέον πλέγματα για να διευκολύνει την τοποθέτηση των αντικειμένων.

grid-auto-columnsιδιότητες καιgrid-auto-rows Οι ιδιότητες χρησιμοποιούνται για τον ορισμό του πλάτους της στήλης και του ύψους της γραμμής του πλεονάζοντος πλέγματος που δημιουργείται αυτόματα από το πρόγραμμα περιήγησης.Γράφονται με τον ίδιο τρόπο όπωςgrid-template-columnsκαιgrid-template-rows Ακριβώς το ίδιο. Εάν αυτές οι δύο ιδιότητες δεν καθορίζονται, το πρόγραμμα περιήγησης καθορίζει το πλάτος της στήλης και το ύψος της γραμμής του νέου πλέγματος αποκλειστικά με βάση το μέγεθος του περιεχομένου κελιού.

Παράδειγμα παρακάτωΣτο εσωτερικό, το διαιρεμένο πλέγμα είναι 3 σειρές x 3 στήλες, αλλά το στοιχείο Νο. 8 καθορίζεται στην 4η σειρά και το στοιχείο Νο. 9 στην 5η σειρά.

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
  grid-auto-rows: 50px;
}
1
2
3
4
5
6

Ο παραπάνω κώδικας καθορίζει ότι το ύψος της νέας σειράς είναι ομοιόμορφα 50 px (το αρχικό ύψος της σειράς είναι 100 px).

3.9 χαρακτηριστικό grid-template, χαρακτηριστικό grid

grid-templateΤα ακίνητα είναιgrid-template-columns、grid-template-rowsκαιgrid-template-areasΗ συνδυασμένη συντομογραφία αυτών των τριών ιδιοτήτων.

gridΤα ακίνητα είναιgrid-template-rows、grid-template-columns、grid-template-areas、 grid-auto-rows、grid-auto-columns、grid-auto-flowΗ συνδυασμένη συντομογραφία αυτών των έξι ιδιοτήτων.

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

4. Χαρακτηριστικά έργου

Οι ακόλουθες ιδιότητες ορίζονται στο έργο.

4.1 ιδιότητα grid-column-start, ιδιότητα grid-column-end, ιδιότητα grid-row-start, ιδιότητα grid-row-end

Η θέση του έργου μπορεί να καθοριστεί Η συγκεκριμένη μέθοδος είναι να καθοριστούν τα τέσσερα όρια του έργου και ποιες γραμμές πλέγματος τοποθετούνται αντίστοιχα.

• grid-column-startΙδιότητες: Κάθετες γραμμές πλέγματος όπου βρίσκεται το αριστερό περίγραμμα
• grid-column-endΙδιότητα: Η κάθετη γραμμή πλέγματος όπου βρίσκεται το δεξί περίγραμμα
• grid-row-startΙδιότητες: Η οριζόντια γραμμή πλέγματος όπου βρίσκεται το άνω περίγραμμα
• grid-row-endΙδιότητες: Η οριζόντια γραμμή πλέγματος όπου βρίσκεται το κάτω περίγραμμα

.item-1 {
  grid-column-start: 2;
  grid-column-end: 4;
}
1
2
3
4

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

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

Εκτός από το στοιχείο Νο. 1, τα άλλα στοιχεία δεν έχουν καθορισμένες θέσεις και καθορίζονται αυτόματα από το πρόγραμμα περιήγησηςgrid-auto-flowΚαθορίζεται από το χαρακτηριστικό, η προεπιλεγμένη τιμή αυτού του χαρακτηριστικού είναιrow , έτσι θα τακτοποιηθούν "πρώτα σειρά και μετά στήλη".Οι αναγνώστες μπορούν να αλλάξουν την τιμή αυτού του χαρακτηριστικού σεcolumn、row denseκαιcolumn dense, για να δείτε πώς έχουν αλλάξει οι θέσεις άλλων στοιχείων.

Παράδειγμα παρακάτωΕίναι το αποτέλεσμα του προσδιορισμού των θέσεων τεσσάρων συνόρων.

.item-1 {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 4;
}
1
2
3
4
5
6

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

.item-1 {
  grid-column-start: header-start;
  grid-column-end: header-end;
}
1
2
3
4

Στον παραπάνω κώδικα, οι θέσεις του αριστερού και του δεξιού περιγράμματος καθορίζονται ως τα ονόματα των γραμμών πλέγματος.

Οι τιμές αυτών των τεσσάρων χαρακτηριστικών μπορούν επίσης να χρησιμοποιηθούνspanΛέξη-κλειδί, που υποδεικνύει "span", δηλαδή πόσα πλέγματα εκτείνονται μεταξύ του αριστερού και του δεξιού περιγράμματος (πάνω και κάτω περιγράμματα).

.item-1 {
  grid-column-start: span 2;
}
1
2
3

παραπάνω κωδικόςΥποδεικνύει ότι το αριστερό περίγραμμα του στοιχείου Νο. 1 εκτείνεται σε 2 πλέγματα από το δεξί περίγραμμα.

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

.item-1 {
  grid-column-end: span 2;
}
1
2
3

Χρησιμοποιώντας αυτά τα τέσσερα χαρακτηριστικά, εάν υπάρχει επικάλυψη στοιχείων, χρησιμοποιήστεz-indexΗ ιδιότητα καθορίζει την αλληλοεπικαλυπτόμενη σειρά των στοιχείων.

4.2 χαρακτηριστικό grid-column, grid-row χαρακτηριστικό

grid-columnΤα ακίνητα είναιgrid-column-startκαιgrid-column-endΗ συνδυασμένη συντομογραφία τουgrid-rowΤα ακίνητα είναιgrid-row-startιδιότητες καιgrid-row-endΗ συντομευμένη μορφή της συγχώνευσης.

.item {
  grid-column: <start-line/ <end-line>;
  grid-row: <start-line/ <end-line>;
}
1
2
3
4

Παρακάτω είναι ένα παράδειγμα.

.item-1 {
  grid-column: 1 / 3;
  grid-row: 1 / 2;
}
/* 等同于 */
.item-1 {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 2;
}
1
2
3
4
5
6
7
8
9
10
11

Στον παραπάνω κώδικα, το έργοitem-1Καταλάβετε την πρώτη σειρά, από τη γραμμή της πρώτης στήλης έως τη γραμμή της τρίτης στήλης.

Μεταξύ αυτών των δύο χαρακτηριστικών, μπορείτε επίσης να χρησιμοποιήσετεspanΛέξη-κλειδί που υποδεικνύει πόσα πλέγματα πρέπει να εκτείνονται.

.item-1 {
  background: #b03532;
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}
/* 等同于 */
.item-1 {
  background: #b03532;
  grid-column: 1 / span 2;
  grid-row: 1 / span 2;
}
1
2
3
4
5
6
7
8
9
10
11

παραπάνω κωδικόςσε, έργοitem-1Η κατειλημμένη περιοχή περιλαμβάνει την πρώτη σειρά + δεύτερη σειρά και την πρώτη στήλη + δεύτερη στήλη.

Η κάθετο και τα ακόλουθα μέρη μπορούν να παραληφθούν και να εκτείνονται σε ένα πλέγμα από προεπιλογή.

.item-1 {
  grid-column: 1;
  grid-row: 1;
}
1
2
3
4

Στον παραπάνω κώδικα, το έργοitem-1Καταλάβετε το πρώτο πλέγμα στην επάνω αριστερή γωνία.

4.3 χαρακτηριστικό grid- area

grid-areaΤο χαρακτηριστικό καθορίζει την περιοχή στην οποία τοποθετείται το στοιχείο.

.item-1 {
  grid-area: e;
}
1
2
3

παραπάνω κωδικόςΣτο , το Project No. 1 βρίσκεται στοeπεριοχή, το αποτέλεσμα είναι όπως φαίνεται παρακάτω.

grid-areaΟι ιδιότητες μπορούν επίσης να χρησιμοποιηθούν ωςgrid-row-start、grid-column-start、grid-row-end、grid-column-endΗ συγχωνευμένη συντομογραφία καθορίζει άμεσα τη θέση του έργου.

.item {
  grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
}
1
2
3

Παρακάτω είναι έναπαράδειγμα。

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

4.4 χαρακτηριστικό justify-self, align-self χαρακτηριστικό, place-self χαρακτηριστικό

justify-selfΗ ιδιότητα ορίζει την οριζόντια θέση (αριστερά, κέντρο, δεξιά) του περιεχομένου κελιού, ακολουθούμενη απόjustify-itemsΟι ιδιότητες χρησιμοποιούνται ακριβώς το ίδιο, αλλά ισχύουν μόνο για ένα μόνο στοιχείο.

align-selfΗ ιδιότητα ορίζει την κατακόρυφη θέση (πάνω, μέση, κάτω) του περιεχομένου κελιού, ακολουθούμενη απόalign-itemsΗ χρήση των χαρακτηριστικών είναι ακριβώς η ίδια και επηρεάζει μόνο ένα έργο.

.item {
  justify-self: start | end | center | stretch;
  align-self: start | end | center | stretch;
}
1
2
3
4

Και οι δύο ιδιότητες μπορούν να λάβουν τις ακόλουθες τέσσερις τιμές.

• start: ευθυγραμμίστε την αρχική άκρη του κελιού.
• τέλος: Ευθυγράμμιση στην ακραία άκρη του κελιού.
• κέντρο: Κέντρο μέσα στο κελί.
• stretch: τέντωμα για να γεμίσει ολόκληρο το πλάτος του κελιού (προεπιλεγμένη τιμή).

Παρακάτω είναιjustify-self: startπαράδειγμα του.

.item-1 {
  justify-self: start;
}
1
2
3

place-selfΤα ακίνητα είναιalign-selfιδιότητες καιjustify-selfΗ συνδυασμένη στενογραφία του ακινήτου.

place-self: <align-self> <justify-self>;
1

Παρακάτω είναι ένα παράδειγμα.

place-self: center center;
1

Εάν η δεύτερη τιμή παραλειφθεί,place-selfΤο ακίνητο θα θεωρήσει τις δύο τιμές ίσες.