Οδηγός για τη διάταξη πλέγματος CSS από τη μονάδα

ο Μονάδα διαμόρφωσης πλέγματος CSS εστάλη με a νέα μονάδα CSS ονομάζεται fr μονάδα. Όσο πιο απλό μπορεί να είναι, fr είναι το συντομογραφία της λέξης “κλάσμα”. Η νέα μονάδα καθιστά δυνατή την ταχεία χάραξη του πλέγματος σε αναλογικές στήλες ή σειρές. Ως αποτέλεσμα, η δημιουργία του πλήρως ανταποκρινόμενα και ευέλικτα δίκτυα γίνεται σχεδόν αεράκι.

Καθώς η μονάδα κλάσματος εισήχθη μαζί με τη λειτουργική μονάδα Layout Grid, μπορείτε να την χρησιμοποιήσετε σε οποιοδήποτε πρόγραμμα περιήγησης που υποστηρίζει το δίκτυο CSS. Εάν θέλετε επίσης να υποστηρίξετε τα παλαιότερα προγράμματα περιήγησης, εδώ είναι μια μεγάλη CSS πλέγμα polyfill που σας επιτρέπει να χρησιμοποιήσετε όχι μόνο το fr αλλά και άλλα χαρακτηριστικά πλέγματος.

Βασική χρήση

Πρώτον, ας ρίξουμε μια ματιά σε ένα βασικό πλέγμα που χρησιμοποιεί τη μονάδα κλάσματος. Η παρακάτω διάταξη χωρίζει τον χώρο τρεις στήλες ίσου πλάτους και δύο σειρές ίσου ύψους.

Το HTML που ανήκει αποτελείται από έξι διαφορές σημειωμένο με το .κουτί τάξη, μέσα σε α .περικάλυμμα div.

 
 
1.
 
2.
 
3.
 
4.
 
5.
 
6.
 
 

Για να χρησιμοποιήσετε τη λειτουργική μονάδα Layout Grid, πρέπει να προσθέσετε το εμφάνιση: πλέγμα; CSS στην περιτυλίξη. ο πλέγμα-πρότυπο-στήλες η ιδιοκτησία χρησιμοποιεί το fr μονάδα ως αξία. ο αναλογία των τριών στηλών είναι 1: 1: 1.

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

ο χάσμα δικτύου ιδιοκτησία προσθέτει ένα πλέγμα 10px μεταξύ των κιβωτίων. Εάν δεν θέλετε κάποιο κενό απλά να αφαιρέσετε αυτήν την ιδιότητα.

 .περιτύλιγμα εμφάνιση: πλέγμα; πλέγμα-πρότυπο-στήλες: 1fr 1fr 1fr; πλέγμα-πρότυπο-σειρές: 200px 200px; πλέγμα-διάκενο: 10px;  .box χρώμα: λευκό; κείμενο-ευθυγράμμιση: κέντρο; μέγεθος γραμματοσειράς: 30px; padding: 25px;  

Σημειώστε ότι το CSS παραπάνω δεν περιέχει κάποιο βασικό στυλ όπως χρώματα φόντου. Μπορείς βρείτε το πλήρες κώδικα στο demo στο τέλος του άρθρου.

Αναλογία αλλαγής

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

Επίσης, αύξησα την αξία του χάσμα δικτύου για να μπορείτε να δείτε πώς αλλάζει η διάταξη. Βασικά, το πρόγραμμα περιήγησης αφαιρεί το χάσμα δικτύου από το πλάτος της προβολής (σε αυτό το παράδειγμα, τα κενά δικτύου ανέρχονται σε 80px), και κόβει τα υπόλοιπα σύμφωνα με τα κλάσματα.

 .περιτύλιγμα εμφάνιση: πλέγμα; πλέγμα-πρότυπο-στήλες: 1fr 2fr 1fr; πλέγμα-πρότυπο-σειρές: 200px 200px; κεντρικό διάκενο: 40px;  

Συνδυασμός fr με άλλες μονάδες CSS

Μπορείς συνδυασμός ο fr μονάδα με οποιεσδήποτε άλλες μονάδες CSS επισης. Για παράδειγμα, στο παρακάτω παράδειγμα, χρησιμοποίησα το 60% 1ος 2ος αναλογία για το πλέγμα μου.

Λοιπόν, πώς λειτουργεί αυτό; ο το πρόγραμμα περιήγησης αντιστοιχεί στο 60% του πλάτους προβολής στην πρώτη στήλη. Στη συνέχεια, διαιρεί τον υπόλοιπο χώρο σε κλάσματα 1: 2.

Το ίδιο πράγμα θα μπορούσε επίσης να γραφτεί ως 60% 13.33333% 26.66667%. Αλλά ειλικρινά, γιατί θα ήθελε κάποιος να χρησιμοποιήσει αυτή τη μορφή; Ένα τεράστιο πλεονέκτημα της μονάδας κλάσματος είναι ότι αυτό βελτιώνει την αναγνωσιμότητα του κώδικα. Επιπλέον, είναι πλήρως ακριβείς, καθώς η μορφή ποσοστού εξακολουθεί να αυξάνεται μόνο στο 99,9999%.

 .περιτύλιγμα εμφάνιση: πλέγμα; πλέγμα-πρότυπο-στήλες: 60% 1fr 2fr; πλέγμα-πρότυπο-σειρές: 200px 200px; πλέγμα-διάκενο: 10px;  

Εκτός από τα ποσοστά, μπορείτε επίσης να χρησιμοποιήσετε άλλες μονάδες CSS μαζί με τη μονάδα κλάσματος, για παράδειγμα pt, px, em, και rem.

Προσθήκη λευκού με fr

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

Όπως μπορείτε να δείτε, αυτό το πλέγμα έχει μια κενή στήλη ενώ διατηρεί ακόμα και τα έξι κουτιά. Για αυτή τη διάταξη, πρέπει να φέρουμε το διάστημα επάνω σε τέσσερις στήλες αντί για τρεις. Έτσι, χρησιμοποιούμε το 1fr 1fr 1fr 1fr τιμή για το πλέγμα-πρότυπο-στήλες ιδιοκτησία.

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

 .περιτύλιγμα εμφάνιση: πλέγμα; πλέγμα-πρότυπο-στήλες: 1fr 1fr 1fr 1fr; πλέγμα-πρότυπο-σειρές: 200px 200px; πλέγμα-διάκενο: 10px; πλέγμα-πρότυπα-περιοχές: "κουτί-1 κουτί-2" κουτί-3 "" κουτί-4 κουτί-5.  .box-1 περιοχή πλέγματος: πλαίσιο-1;  .box-2 περιοχή πλέγματος: πλαίσιο-2;  .box-3 περιοχή πλέγματος: πλαίσιο-3;  .box-4 περιοχή πλέγματος: πλαίσιο-4;  .box-5 περιοχή πλέγματος: πλαίσιο-5;  .box-6 περιοχή πλέγματος: πλαίσιο-6;  

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

ο επαναλαμβάνω() λειτουργία

Μπορείτε επίσης να χρησιμοποιήσετε το fr μονάδα μαζί με το επαναλαμβάνω() λειτουργία για ένα απλούστερη σύνταξη. , αυτό δεν είναι απαραίτητο αν έχετε μόνο ένα απλό πλέγμα αλλά μπορείτε να το χρησιμοποιήσετε όταν το θέλετε υλοποιήσετε μια περίπλοκη διάταξη, για παράδειγμα a ένθετο πλέγμα.

 .περιτύλιγμα εμφάνιση: πλέγμα; πλέγμα-πρότυπο-στήλες: επανάληψη (3, 1fr); / * πλέγμα-πρότυπο-στήλες: 1fr 1fr 1fr; * / πλέγμα-πρότυπο-σειρές: 200px; πλέγμα-διάκενο: 10px;  

ο επαναλάβετε (3, 1fr) σύνταξη καταλήγει στην ίδια διάταξη όπως και 1fr 1fr 1fr. Η παρακάτω διάταξη είναι η ίδια με το πρώτο παράδειγμα.

Αν εσύ αύξηση του πολλαπλασιαστή μεσα στην επαναλαμβάνω() θα έχετε περισσότερες στήλες. Για παράδειγμα, επαναλάβετε (6, 1fr) αποτελέσματα σε έξι ίσες στήλες. Σε αυτή την περίπτωση, όλα τα κουτιά μας θα είναι στην ίδια σειρά, που σημαίνει ότι αρκεί να χρησιμοποιήσετε μόνο μία τιμή (200px) για το πλέγμα-πρότυπο-σειρές ιδιοκτησία.

 .περιτύλιγμα εμφάνιση: πλέγμα; πλέγμα-πρότυπο-στήλες: επανάληψη (6, 1fr); πλέγμα-πρότυπο-σειρές: 200px; πλέγμα-διάκενο: 10px;  

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

 .περιτύλιγμα εμφάνιση: πλέγμα; πλέγμα-πρότυπο-στήλες: επανάληψη (3, 1fr) επανάληψη (3, 2fr); πλέγμα-πρότυπο-σειρές: 200px; πλέγμα-διάκενο: 10px;  

Μπορείτε επίσης να συνδυασμός επαναλαμβάνω() με άλλες μονάδες CSS. Για παράδειγμα, μπορείτε να χρησιμοποιήσετε Επανάληψη 200px (4, 1fr) 200px ως έγκυρο κώδικα.

Αν σας ενδιαφέρει πώς να δημιουργία σύνθετων διατάξεων με τη μονάδα CSS Grid, το επαναλαμβάνω() λειτουργία και το fr μονάδα Rachel Andrew έχει μια ενδιαφέρουσα θέση στο blog για το πώς μπορείτε να το κάνετε αυτό.

Ένα demo για πειραματισμό

Τελικά, εδώ είναι το demo που υποσχέθηκα. Χρησιμοποιεί τον ίδιο κώδικα με το πρώτο παράδειγμα σε αυτό το άρθρο. Τον πετάξτε και δείτε τι μπορείτε να πετύχετε με το fr μονάδα.