Πώς να αναδημιουργήσετε τη διάταξη άρθρων του Medium με το CSS Grid

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

Σε αυτό το σεμινάριο, θα σας εξηγήσω πώς να αναδημιουργήσετε τη διάσημη διάταξη Medium article χρησιμοποιώντας το CSS Grid.

Σημείωση: Έχω επίσης συμμετάσχει στη δημιουργία δωρεάν μαθήματος CSS Grid με 13 τμήματα στο Scrimba. Αποκτήστε πρόσβαση στο μάθημα εδώ.

Κάντε κλικ στην εικόνα για να μεταβείτε στο πλήρες μάθημα CSS Grid.

Στο μάθημα, ο συνάδελφός μου Magnus Holm θα διερευνήσει πώς να δημιουργήσει μια διάταξη άρθρων χρησιμοποιώντας το CSS Grid. Επομένως, αν προτιμάτε να παρακολουθείτε αντί να διαβάζετε, φροντίστε να δείτε το screencast του.

Το περιεχόμενο

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

Εκτελείται οποιοδήποτε πακέτο NPM στο πρόγραμμα περιήγησης τοπικά

Η JavaScript δεν είχε ποτέ επίσημη λύση για τη διανομή πακέτων και κάθε πλατφόρμα ιστού (Rails, Django κ.λπ.) έχει τη δική της ιδέα για τη δομή και τη συσκευασία του JavaScript. Τα τελευταία χρόνια, το NPM έχει αρχίσει να γίνεται κανονικός τρόπος διανομής, με το Webpack ως το σύστημα δημιουργίας, αλλά δεν υπάρχει τρόπος φόρτωσης των πακέτων NPM στο πρόγραμμα περιήγησης χωρίς συστατικό στοιχείο από την πλευρά του διακομιστή.

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

<σχήμα>

Αν ανοίξετε αυτό το αρχείο σε έναν ιστότοπο χωρίς να προσαρμόσετε οποιαδήποτε διάταξη, θα μοιάζει με αυτό:

Δεν είναι ιδιαίτερα κομψό. Ας το διορθώσουμε με το CSS Grid. Θα το κάνουμε βήμα προς βήμα, ώστε να είναι εύκολο να ακολουθήσετε.

Βασική ρύθμιση για τα περιθώρια

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

άρθρο {
    εμφάνιση: πλέγμα;
    πλέγμα-πρότυπο-στήλες: 1fr 740px 1fr;
}}

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

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

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

άρθρο> * {
    πλέγμα-στήλη: 2;
}}

Έχουμε τώρα το ακόλουθο αποτέλεσμα:

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

Ωστόσο, αυτό το αποτέλεσμα θα μπορούσε να επιτευχθεί εξίσου εύκολα με τη χρήση της ρύθμισης της ιδιότητας αριστερού και δεξιού περιθωρίου σε αυτόματη. Γιατί λοιπόν να χρησιμοποιήσετε το CSS Grid;

Λοιπόν, το πρόβλημα προκύπτει όταν θέλουμε να μιμηθούμε τα χαρακτηριστικά εικόνας του Medium. Για παράδειγμα, δημιουργώντας εικόνες πλήρους πλάτους, όπως αυτή:

Εάν είχαμε χρησιμοποιήσει το περιθώριο: 0 αυτό αυτό θα μας ανάγκασε να εφαρμόσουμε αρνητικά περιθώρια στις εικόνες για να τα καταλάβουμε ολόκληρο το πλάτος της ιστοσελίδας, το οποίο είναι ακατάστατο.

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

άρθρο> σχήμα {
    πλέγμα-στήλη: 1 / -1;
    περιθώριο: 20px 0;
}}

Έχουμε επίσης θέσει κάποιο περιθώριο στο πάνω και στο κάτω μέρος. Και τότε έχουμε μια ωραία εικόνα πλήρους πλάτους:

Επέκταση με περισσότερες στήλες

Ωστόσο, αυτό δεν μας φέρνει σε όλη τη διαδρομή, καθώς το Medium έχει μερικές άλλες διατάξεις που πρέπει να λάβουμε υπόψη. Ας δούμε μερικά από αυτά:

Εικόνες μεσαίου μεγέθους

Αυτή είναι η επιλογή εικόνας μεταξύ του κανονικού και του πλήρους πλάτους, κάτι που θα ονομάσουμε ένα μεσαίου μεγέθους. Μοιάζει με αυτό:

ΣΗΜΕΙΩΣΗ: Αν παρακολουθείτε σε κινητά, αυτή η εικόνα είναι ίδια με την πλήρη πλάτος. Σε αυτό το άρθρο, εστιάζουμε μόνο στην διάταξη επιφάνειας εργασίας.

Αυτό θα απαιτήσει τουλάχιστον δύο νέες στήλες στη διάταξή μας.

Αποσπάσματα

Επιπλέον, το Medium τοποθετεί επίσης μια κάθετη γραμμή στην αριστερή πλευρά του άρθρου αν προσθέσετε ένα απόσπασμα:

← Παρατηρήστε την κάθετη γραμμή. Θα χρειαστεί να προσθέσουμε μια επιπλέον στήλη στο πλέγμα μας εξαιτίας αυτού.

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

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

άρθρο {
    εμφάνιση: πλέγμα;
    πλέγμα-πρότυπο-στήλες: 1fr 1fr 10px 740px 10px 1fr 1fr;
}}

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

Έχω προσθέσει δείκτες για να διευκολύνω την αναγνώριση των διαφορετικών στηλών.

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

άρθρο> * {
    πλέγμα-στήλη: 4;
}}

Στη συνέχεια, μπορούμε να δημιουργήσουμε την εικόνα μεσαίου μεγέθους κάνοντας:

άρθρο> σχήμα {
    πλέγμα-στήλη: 2 / -2;
    περιθώριο: 20px 0;
}}

Δείτε πώς φαίνεται αυτό με τον επιθεωρητή Chrome ενεργοποιημένο:

Τα αποσπάσματα δημιουργούνται εύκολα κάνοντας τα εξής:

άρθρο> blockquote {
    πλέγμα-στήλη: 3/5;
    padding-left: 10px;
    χρώμα: # 666;
    όριο αριστερά: 3χλ. συμπαγές μαύρο.
}}

Το κάνουμε να εκτείνεται από την τρίτη στην τρίτη στην πέμπτη γραμμή στήλης. Προσθέτουμε επίσης την παραμόρφωση αριστερά: 10px. έτσι ώστε το κείμενο να φαίνεται να ξεκινά από την τέταρτη γραμμή στήλης (η τρίτη στήλη έχει πλάτος 10 pixel επίσης). Δείτε πώς φαίνεται στο πλέγμα.

Sidemarks

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

Το στοιχείο κειμένου Top highlight θα ήταν ένας εφιάλτης για να δημιουργήσουμε αν είχαμε χρησιμοποιήσει το περιθώριο: 0 auto; αντί αν το CSS Grid. Αυτό οφείλεται στο γεγονός ότι το στοιχείο δρα διαφορετικά από όλα τα άλλα στοιχεία του άρθρου. Αντί να εμφανίζεται σε μια νέα γραμμή, υποτίθεται ότι εμφανίζεται στη δεξιά πλευρά του προηγούμενου στοιχείου. Εάν δεν χρησιμοποιήσαμε το CSS Grid θα έπρεπε πιθανότατα να αρχίσουμε να μπερδεύουμε με τη θέση: απόλυτη. να κάνει αυτό το έργο.

Αλλά με το CSS Grid είναι πολύ απλό. Θα κάνουμε ακριβώς αυτό το είδος στοιχείου να ξεκινήσει στην τέταρτη στήλη.

.κατά μέρος {
    στήλη-στήλη: 5;
}}

Αυτό θα γίνει αυτόματα στα δεξιά του άρθρου:

Σημείωση: Δεν έχω τονίσει το κείμενο με πράσινο χρώμα, καθώς αυτό δεν έχει σχέση με το CSS Grid.

Και αυτό είναι! Έχουμε δημιουργήσει πλέον το μεγαλύτερο μέρος της διάταξης του άρθρου του Medium χρησιμοποιώντας το CSS Grid. Και ήταν πραγματικά εύκολο. Σημειώστε όμως ότι δεν έχουμε αγγίξει την ανταπόκριση, καθώς απαιτεί ένα εντελώς νέο άρθρο από μόνο του.

Ελέγξτε αυτή την παιδική χαρά του Scrimba για να δείτε ολόκληρο τον κώδικα.

Ευχαριστώ για την ανάγνωση! Το όνομά μου είναι Per, είμαι ο συνιδρυτής της Scrimba και αγαπώ βοηθώντας τους ανθρώπους να μάθουν νέες δεξιότητες. Παρακολουθήστε με στο Twitter αν θέλετε να ενημερώνεστε για νέα άρθρα και πόρους.