Τι είναι η ιδιότητα πλέγματος;

Η ιδιότητα πλέγματος είναι μια ιδιότητα στενογραφία για το πλέγμα-πρότυπο-σειρές, πλέγμα-πρότυπο-στήλες, πλέγμα-πρότυπο περιοχές, πλέγμα-αυτόματες σειρές, πλέγμα-αυτόματη στήλες, πλέγμα-αυτόματη ροή, , και ιδιότητες διακένου γραμμής πλέγματος.

Δομή δικτύου

Η ιδιότητα πλέγματος κάνει τα στοιχεία να εμφανίζονται σαν matrix ⊞

 
 
 
 
 
 
 
 

Στο css

#container {
 εμφάνιση: πλέγμα;
 }}

Στο παράδειγμα,, ο #container εμφανίζεται ως πλέγμα και το παιδικό του στοιχείο θα εμφανίζεται ως κελιά πλέγματος ή αντικείμενα

Συμβατότητα με το πρόγραμμα περιήγησης

Είναι ένας τεράστιος ενθουσιασμός, ότι IE, Edge, Firefox υποστηρίζει CSS πλέγμα ιδιοκτησίας . Κυρίως όλος ο περιηγητής έχει όμορφη UI πλέγματος σε εργαλεία ανάπτυξης.

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

Οι γραμμές πλέγματος είναι οριζόντιες και κάθετες γραμμές, χρησιμοποιούνται για την τοποθέτηση. Ο δείκτης θέσης μπορεί να είναι ακέραιος (τόσο αρνητικός όσο και θετικός ακέραιος αριθμός).

Ιδιότητες → πλέγμα-στήλη-έναρξη, πλέγμα-στήλη-τέλος, πλέγμα-γραμμή-τέλος, πλέγμα-γραμμή-τέλος.

Κωδικός δείγματος:

#grid> div: nth-child (2) {
 πλέγμα-στήλη-έναρξη: 2;
 πλέγμα-άκρο-στήλη: 3;
 πλέγμα-έναρξη-σειρά: 2;
 πλέγμα-άκρο σειρά: 3;
}}

Το στοιχείο 2 θα ξεκινά από τη δεύτερη κατακόρυφη γραμμή σε 2 οριζόντια γραμμή και το στοιχείο θα καταλήγει σε 3 κάθετη γραμμή και 3 κάθετη γραμμή.

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

Κελί δικτύου

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

Πλέγμα Cell

Πλέγματα πλέγματος

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

Διαδρομή πλέγματος

Περιοχή πλέγματος & χάσμα πλέγματος

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

Το Grid Gap είναι ο χώρος μεταξύ των γραμμών και των στηλών. Η ιδιότητά του στενογραφία του διαστήματος-κενό-κενό και κενό-στήλη-κενό.

Γραμμή πλέγματος και πλέγμα πλέγματος

η σειρά πλέγματος είναι ιδιότητα shorthand για την έναρξη της γραμμής-γραμμής και το τέλος της γραμμής.

η στήλη πλέγματος είναι ιδιότητα shorthand για την έναρξη της στήλης-στήλη και το τέλος της στήλης-στήλης

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

πλέγμα-γραμμή-έναρξη → καθορίζει τη θέση έναρξης του στοιχείου πλέγματος στη σειρά

eg.grid-start-start: 2 → Το στοιχείο ξεκινά από τη δεύτερη κατακόρυφη γραμμή

πλέγμα-άκρο → καθορίζει την τελική θέση του στοιχείου πλέγματος στη σειρά

eg.grid-end-end: 3 → Το στοιχείο θα τελειώσει σε δεύτερη κατακόρυφη γραμμή

Grid-αυτόματη ροή

Ελέγχει πώς λειτουργεί ο αλγόριθμος αυτόματης τοποθέτησης. Από προεπιλογή, η τιμή είναι η σειρά (Τα στοιχεία τοποθετούνται σε σειρά)

πλέγμα-αυτόματη ροή: σειρά?
πλέγμα-αυτόματη ροή: στήλη?
Πύλη αυτόματης ροής δικτύου και γραμμή αυτόματης ροής δικτύου

πλέγμα-αυτόματη ροή: πυκνή σειρά → Χρησιμοποιεί "πυκνό" αλγόριθμο συσκευασίας. Συμπληρώστε τον ελεύθερο χώρο στο πλέγμα σε βάση σειράς.

πλέγμα-αυτόματη ροή: πυκνή στήλη → Χρησιμοποιεί τον "πυκνό" αλγόριθμο συσκευασίας. Συμπληρώστε τον ελεύθερο χώρο στο δίκτυο σε στήλη

Explicit Grid and Implicit Grid

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

πλέγμα-πρότυπο-στήλες: επανάληψη (3, 100px);
πλέγμα-πρότυπο-σειρές: 100px 100px;

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

πλέγμα-πρότυπο-στήλες: επανάληψη (3, 100px);
πλέγμα-αυτόματες σειρές: 100px;

Παραγγελία πλέγματος:

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

μπορούμε να αλλάξουμε την περιοχή προτύπου σε ερώτημα μέσων και να παρουσιάσουμε νέα δομή δικτύου.

ελέγξτε τον κωδικό για περισσότερες πληροφορίες.

Για το δίκτυο, ως επί το πλείστον χρησιμοποιούν όλοι το σύστημα πλέγματος bootstrap. Το bootstrap μπορεί να αλλάξει κάποιο όνομα κλάσης σε κάθε έκδοση (αλλά όχι σαν γωνιακή ), έτσι πρέπει να θυμηθούμε ποια έκδοση έχει ποιο όνομα κλάσης .

Χρησιμοποιώντας την ιδιότητα πλέγματος CSS, μπορούμε (ακόμη και στο IE ) να προβάλλουμε εύκολα τα στοιχεία σε προβολή πλέγματος.

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