Ο Snook δημοσίευσε ένα άρθρο με τίτλο «Επικάλυψη κεφαλίδας με CSS Grid» όπου κοιτάζει ένα μοτίβο σχεδίασης κεφαλίδας που πιστεύω ότι υπερβαίνει τις τάσεις και είναι δημοφιλές για πάντα. Η ιδέα είναι ότι η κεφαλίδα είναι υπερβολική και η κύρια περιοχή περιεχομένου μπαίνει σε αυτήν και επικαλύπτει το φόντο της κεφαλίδας. Υπάρχει κάτι κάπως ωραίο και παρηγορητικό γι 'αυτό.
Το μυαλό μου πηγαίνει στο ίδιο μέρος που κάνει ο Snook:
Ιστορικά, το έκανα με αρνητικά περιθώρια. Η κεφαλίδα έχει ένα ύψος που προσθέτει μια δέσμη γεμισμάτων στο κάτω μέρος και στη συνέχεια το σώμα παίρνει ένα
margin-top: -50pxή οτιδήποτε απαιτεί ο σχεδιασμός.
Αλλά τότε αποφασίζει να το κάνει με το CSS grid αντ 'αυτού! Ενδιαφέρων. Γιατί; Λοιπόν αυτό θα βρούμε. Το πλέγμα μπορεί να νιώσει (και να είναι) πιο ανθεκτικό. Το πλέγμα μπορεί επίσης να είναι πιο ευέλικτο. Για παράδειγμα, max-heightκαι τα autoπεριθώρια είναι μεγάλα στο κεντράρισμα, αλλά τι γίνεται αν θέλετε άνισες υδρορροές στα άκρα; Αυτό θα ήταν δύσκολο εκεί, και εύκολο με το Grid. Ο Ethan Marcotte έγραψε:
Αντί να απλώς προεπιλογώ
max-widthως περιορισμός, μπορώ να χρησιμοποιήσω τον κενό χώρο γύρω από το σχέδιό μου και να τον αντιμετωπίσω ως εργαλείο διάταξης.
Προσπαθώ να αντιστρέψω την ιδέα του Snook σε αυτό το βίντεο και στη συνέχεια να το συγκρίνω με το τελικό αποτέλεσμα.
- Σνούκ
- Mine (καθαρίστηκε ένα smidge post-video για αισθητική)