Διάταξη πλέγματος CSS: πολλαπλασιάστε & κατακτήστε - ή πώς να σχεδιάσετε πραγματικά χρησιμοποιώντας το πλέγμα.

Μπορείτε να ακολουθήσετε εμένα στο Twitter για να πάρετε tutorials, συμβουλές JavaScript, κλπ.

Πρόκειται να σχεδιάσουμε μια προσαρμοσμένη διάταξη χρησιμοποιώντας το CSS Grid σε αυτό το σεμινάριο. Και εδώ είναι μια άποψη του πτηνού για το τι να περιμένουμε από τη διαδικασία:

Για να πάρετε μια καλή ιδέα για το πώς λειτουργεί flex προσπαθήστε flex editor editor σε αυτή τη σελίδα.

Ολόκληρο το enchilada. Μου αρέσει να δημοσιεύομαι το περιεχόμενο της εικόνας του πτηνού για να εξοικονομήσετε χρόνο.

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

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

Αυτό που έχω ανακαλύψει ακολουθεί.

Βασικές ιδέες πίσω από τη διαίρεση της στήλης

Προσπάθησα να καταλάβω τι κερδίζουμε πραγματικά από κάθε διαίρεση στήλης.

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

Δύο στήλες σχέδια είναι εντάξει για μίνι (δισκίο;) εικόνες / χαρτοφυλάκια.

Τα σχέδια δέντρων-στήλης είναι τα πρώτα του είδους που προσφέρουν σύνορα (περιθώρια).

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

Παρατήρησα ότι οι διατάξεις στήλης περιττών αριθμών (≥ 1) λειτουργούν για διατάξεις με βάση τα σύνορα.

Χμμ. τι γίνεται με τον σχεδιασμό των 5 στηλών; Να θυμάστε ότι οι στήλες με περιττές αριθμήσεις συχνά χρησιμοποιούνται για τη δημιουργία συνόρων. Επειδή καταλήγουν πάντα σε 2 επιπλέον πλευρές.

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

Και καθ 'όλη τη διάρκεια του παρόντος μαθήματος θα εξερευνήσουμε ένα!

Χρησιμοποιήστε τις μονάδες fr για να τις κάνετε να επεκταθούν όπως θα κάνατε περιθώριο: αυτόματα σε κανονικά στοιχεία. Δεν έχει σημασία αν είναι 1fr ή 2fr ή n-fr για σύνορα, αρκεί το πρωτεύον περιεχόμενο καθορίζεται χρησιμοποιώντας pixels ή μια μεγάλη (r) fr τιμή (10fr, 20fr, etc):

Η μόνη διαφορά εδώ είναι ότι το Medium χρησιμοποιεί 1000px για ευρύ περιεχόμενο και 700px για τη στήλη του κύριου άρθρου. Αλλά η ιδέα είναι η ίδια.

Ανταπόκριση Grid + Μετάβαση στο κινητό

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

Το CSS Grid κάνει τα πράγματα ευκολότερα από ό, τι νομίζετε!

Θυμάμαι:

ανταποκρινόμενο περιεχόμενο! = ανταποκρινόμενα σύνορα.

Οι δύο τεχνικές πρέπει να αντιμετωπίζονται ξεχωριστά. Αλλά…

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

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

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

Μπορείτε να το κάνετε αυτό μέσω ερωτημάτων μέσων ή JavaScript.

Τέλος ... αλλάξτε την κύρια λωρίδα (πράσινη) σε 10fr. (Μπορείτε να χρησιμοποιήσετε μια παρόμοια τιμή, αλλά το ≥10 συνήθως θα λειτουργήσει καλά.) Αυτό θα κλιμακώσει αυτόματα την κύρια (πράσινη) λωρίδα στην τρέχουσα ανάλυση οθόνης. Δεδομένου ότι και τα δύο σύνορα είναι τώρα 0.5fr, τα πάντα, συμπεριλαμβανομένων των συνόρων και του περιεχομένου, θα κλιμακώνονται σωστά.

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

Πηγαίνοντας στο κινητό

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

Μάθημα που μάθαμε εδώ;

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

  • Είναι αυτή η μόνη λύση; Οχι.
  • Είναι μια τέλεια λύση; Οχι.
  • Αλλά λύνει το πρόβλημα και λειτουργεί - αρκετά επαρκώς.

Και αυτό είναι καλό που πρέπει να στοχεύσετε. Η προσέγγιση που παρουσιάζεται σε αυτό το σεμινάριο είναι:

1. Περισσότερο ανταμείβοντας & διασκέδαση
 2. Είναι αξιοσέβαστο.
 3. Σας καλεί να καταλάβετε πώς και γιατί λειτουργεί κάτι.
 4. Είναι απλό. Ως εκ τούτου, δημιουργεί κώδικα εύκολης συντήρησης.
 5. Παράγει καθαρό κώδικα.
 6. Διατηρεί τη συνείδησή σας καθαρή.

Μιλώντας για την οποία ... αλλιώς ... θα μπορούσατε να ξεκινήσετε τον κώδικα "hacking". (Προσπαθείτε να λύσετε τα προβλήματα με δοκιμές και λάθη, συχνά χωρίς να καταλάβετε πώς πραγματικά λειτουργεί.) Θα συνεχίσετε να κάνετε τα πράγματα με αυτό τον τρόπο. Και μάλλον αισθάνονται ακόμη και την ολοκλήρωση κάποιων ειδών. Αλλά ... δεν θα είναι καμία διασκέδαση.

Δυναμικός επεξεργαστής άρθρων σαν μέσο;

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

Μπορούν να διευθετηθούν με οποιονδήποτε τρόπο. Αλλά νομίζω ότι χρησιμοποιώντας JavaScript και λίγες ώρες από το χρόνο σας, είναι δυνατό να δημιουργήσετε ένα δυναμικά δημιουργημένο επεξεργαστή άρθρων (ακριβώς όπως το Medium's) αλλάζοντας τις περιοχές πλέγματος-πλέγματος όπως περιγράφεται παραπάνω.

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

Μη-CSS εναλλακτική λύση πλέγματος για το σχεδιασμό μεσαίου τύπου αντικειμένων;

Η εναλλακτική λύση χωρίς το δίκτυο CSS; Καλά ... δεν έχει μεγάλη διαφορά. Ίσως πιο περίπλοκο. Είναι ακόμα αλγοριθμική, αλλά καταλήγετε με τακτικά στοιχεία DIV.

Καλή τύχη με αυτό το .

Νομίζω ότι το δίκτυο CSS απλοποιεί τη διαδικασία χωρίς να θυσιάζει καθαρό κώδικα.

Κοίταξα <πηγαίο κώδικα> για τη μεσαία σελίδα μου. Είναι ένα χάος.

Τελικές λέξεις

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

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

Αλλά ... δεν μπορούσα να βρω ένα μόνο online σεμινάριο που το απέδειξε. Έτσι αποφάσισα να γράψω το δικό μου και να το μοιραστώ μαζί σας!

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

Εάν περνάτε χρόνο για να γνωρίσετε το δίκτυο CSS καλά, είναι σαν να εξαπατάτε.

Είναι σχεδόν να με κάνει να αισθάνομαι ότι είμαι καλύτερα στο σχεδιασμό layout από ό, τι είμαι πραγματικά.

Πρέπει να πω ότι είμαι εθισμένος στο δίκτυο CSS σε αυτό το σημείο και θα το χρησιμοποιήσω από δω και πέρα ​​για να δημιουργήσω όλες τις μελλοντικές μου διατάξεις.

Ελπίζω αυτές οι απλές ιδέες να σας βοηθήσουν να εξοικειωθείτε με το CSS Grid.

Για Περισσότερα Εβδομαδιαία Freemium ...

Μπορείτε να με ακολουθήσετε στο Twitter για δώρα του Σαββατοκύριακου PDF.

Ακολουθήστε με στο Instagram για γρήγορο χτύπημα JavaScript.

Μπορείτε να με ακολουθήσετε στο Facebook για δωρεάν κωδικοποίηση.

Προσφορά περιορισμένου χρόνου

Τα διαγράμματα σε αυτό το σεμινάριο επηρεάστηκαν άμεσα από το χειρόγραφο!

CSS Visual Dictionary 28% OFF για Μεσαίους αναγνώστες.

28% OFF

Μεσαίες μόνο αναγνώστες:

CSS Visual Dictionary

== αρπάξτε ένα αντίγραφο ==

Περιέχει όλες τις ιδιότητες του CSS.