Gettin 'Griddy With It: δημιουργήστε το δικό σας CSS Grid και ρίξτε τα πλαίσια

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

Το Bootstrap έρχεται μαζί με το ωραίο όμορφο πλέγμα του, χρησιμοποιώντας μόνο μερικές κατηγορίες και ένα CDN για να δημιουργήσετε αυτό το ωραίο δίκτυο που ανταποκρίνεται σε κινητές συσκευές. Και πριν το γνωρίζετε, αρχίζετε να αναζητάτε αυτό το πλαίσιο κάθε φορά που δημιουργείτε ένα έργο που χρειάζεται διάταξη πλέγματος. Έκανα συχνά το ίδιο, δηλαδή μέχρι που ξεκίνησα το "Gettin 'Griddy With It."

Αυτό που με έστειλε στο δρόμο της εκμάθησης CSS Grid ήταν όταν προσπαθούσα να δημιουργήσω έναν ιστότοπο χρησιμοποιώντας το Semantic UI React (το πιο όμορφο και λιγότερο ασαφές Bootstrap.) Ωστόσο, κατά τη δημιουργία ενός πλέγματος, δεν μπορούσα να κάνω δύο στήλες να κάθονται στο ίδιο επίπεδο ο ένας με τον άλλον, και κατέληξε να χτυπάω με κάθε κανόνα περιθωρίου και γεμίσματος κάτω από τον ήλιο, για να παρακάμψουμε τα στυλ που είχε χτίσει το πλαίσιο. Ήταν απογοητευτική εμπειρία και πέρασα περισσότερο χρόνο για να βρω κανόνες με ειδικότητες από ό, τι στην πραγματικότητα κωδικοποίηση.

Εκεί μπαίνει το CSS Grid. Το CSS Grid είναι μια σχετικά νέα προσθήκη στο CSS3 και το αγόρι είναι ένα doozy. Η μετάβαση σε ένα εισαγόμενο πλαίσιο πλέγματος οδηγεί σε μερικά ζητήματα:

  1. Αυξημένο μέγεθος αρχείων. Όσο περισσότερο εισαγάγετε τόσο μεγαλύτερη γίνεται η εφαρμογή σας. Σε ένα σημείο που η ταχύτητα είναι βασική, η μείωση του μεγέθους του αρχείου της εφαρμογής σας είναι μια εξαιρετικά σημαντική ιδέα που πρέπει να λάβετε υπόψη. Αντί να εισαγάγετε ένα πλαίσιο ή να βασιστείτε σε ένα αργό CDN, μπορείτε να δημιουργήσετε το δικό σας.
  2. Λιγότερο αναγνώσιμος κωδικός. Όσοι από εσάς έχετε χρησιμοποιήσει ένα πλαίσιο γνωρίζετε τα ολοένα και πιο περίπλοκα και ασαφή ονόματα τάξεων που συνοδεύουν. Ποιος δεν αναγνωρίζει αμέσως τι class="col-6 col-md-4 col-sm-12"σημαίνει; Ή ποιος θέλει να καταλήξει να γράφει div.ui.segment.inverted.stackable.desktop.twelve.mobile.sixteenστο CSS;
  3. Λιγότερη προσαρμογή. Οι ενσωματωμένοι κανόνες ενός πλαισίου μπορεί να είναι δύσκολο να παρακαμφθούν. Μπορείτε να καταλήξετε με ονόματα μεγάλων κατηγοριών για να φτάσετε στη σωστή ειδικότητα ή να καταλήξετε με γραμμή μετά από !importantετικέτες για να δημιουργήσετε προσαρμοσμένα στυλ που παρακάμπτουν το πλαίσιο. Η μαγεία του CSS Grid είναι ότι μπορείτε να φτιάξετε το δικό σας και να το προσαρμόσετε στις ανάγκες σας, αντί να βασιστείτε σε άλλους που δεν είχαν στο μυαλό σας το έργο.

Ένα Πλέγμα Αποκριτικής CSS

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

Αυτό μοιάζει με μη μορφοποιημένο ως έξι divsσε ένα δοχείο.

Αντί να χρειάζεται να προσθέσετε τάξεις για καθένα από τα σημεία διακοπής, μπορείτε να ορίσετε το ελάχιστο μέγεθος του div σε ένα πλέγμα και, στη συνέχεια, να συμπληρώσετε αυτόματα με μεγαλύτερα κουτιά απόκρισης χρησιμοποιώντας την frιδιότητα μεγέθους. Πρέπει μόνο να προσθέσετε ιδιότητες πλέγματος CSS για τον γονέα και, στη συνέχεια, τα small-boxdiv θα συμπληρωθούν αυτόματα.

Το CSS για το κοντέινερ έχει ως εξής:

Όπως μπορείτε να δείτε, μπορείτε να δημιουργήσετε ένα απλό πλέγμα απόκρισης από τέσσερις μόνο γραμμές κώδικα. Δεν θα μπορούσε να είναι ευκολότερο και όλο το περιεχόμενό σας είναι ελεύθερο να μετακινείται και να ανακατεύεται ανάλογα με τις ανάγκες. Κανένα ερώτημα πολυμέσων δεν είναι καν απαραίτητο σε αυτήν την περίπτωση. Από εδώ είστε ελεύθεροι να προσαρμόσετε τα μεμονωμένα πλαίσια στο πλέγμα. Είναι αρκετά ευέλικτο για ανταποκρινόμενες διατάξεις και μεγέθη. Παίξτε με αυτό και παρακολουθήστε τα κουτιά να κινούνται μαγικά.

Περιοχές πλέγματος

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

Ακολουθεί ένα παράδειγμα διάταξης ιστότοπου που μπορεί να θέλετε σε επιτραπέζιο και tablet. Η αλλαγή αυτού είναι πολύ απλή. Αν και σε ορισμένους δεν αρέσει η δομή, εσείς και χρησιμοποιείτε μια δομή templating τύπου ASCII για τις περιοχές Grid.

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

Η διάταξη της σελίδας χωρίς μορφοποίηση θα μοιάζει με αυτό με ένα βασικό πλέγμα τριών στηλών 1fr 4fr 1fr. Τα κουτιά θα συμπληρωθούν για να χωρέσουν στον εκχωρημένο χώρο τους εντός του πλέγματος. Ωστόσο, εάν θέλετε η διάταξη της σελίδας σας να είναι πιο ρευστή και δυναμική όπως παρακάτω, μπορείτε να χρησιμοποιήσετε template-areas.

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

Για να λάβετε τη διάταξη της επιφάνειας εργασίας, φτιάχνετε τον μικροσκοπικό σας χάρτη όπως στην grid-template-areasιδιοκτησία. Κάθε γραμμή περιέχει μια σειρά και ονόματα για τις αντίστοιχες στήλες για τη διάταξη. Μπορείτε να δείτε ότι οι ενότητες κεφαλίδας και υποσέλιδου θα εκτείνονται σε ολόκληρες τις στήλες στις οποίες είναι τοποθετημένες. Επίσης, οι πλευρικές γραμμές και το περιεχόμενο εκτείνονται σε πολλές σειρές, όπως μπορείτε να δείτε στην περιοχή "χάρτης". Αυτό μπορεί στη συνέχεια να γίνει σε οποιαδήποτε διάταξη που χρειάζεστε προσθέτοντας την grid-areaιδιότητα στα αντίστοιχα div, όπως στην άκρη δεξιά εικόνα. Μπορείτε να ονομάσετε αυτά που αντιστοιχούν στο έργο σας.

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

συμπέρασμα

Αυτή η απλή ανάρτηση σίγουρα απλώς χαράζει την επιφάνεια του τι μπορείτε να κάνετε με το CSS Grid. Αλλά νομίζω ότι το κύριο πράγμα που πρέπει να απομακρυνθεί από αυτό είναι ότι δεν πρέπει να φοβάστε να χρησιμοποιήσετε το CSS Grid. Είναι πραγματικά πολύ απλό, ισχυρό και ελαφρύ μόλις συνηθίσετε τη νέα σύνταξη. Προχωρήστε και απολαύστε το "Gettin 'Griddy With It."

Για περισσότερες πληροφορίες σχετικά με το CSS Grid, συνιστώ ανεπιφύλακτα να ελέγξετε το //cssgrid.io που διδάσκει ο Wes Bos. Είναι ένα φανταστικό σεμινάριο CSS Grid.

Επίσης, καθώς έχετε απορίες, φροντίστε να δείτε τον ιστότοπο CSS Tricks στη διεύθυνση //css-tricks.com/snippets/css/complete-guide-grid/ για να μάθετε περισσότερα σχετικά με το πλέγμα.

Για να δείτε περισσότερα από τη δουλειά μου, επισκεφτείτε τη διεύθυνση //theran.co και μάθετε περισσότερα για εμένα.