Snook menerbitkan sebuah artikel berjudul "Overlapping Header with CSS Grid" di mana dia melihat corak reka bentuk header yang saya rasa melebihi tren dan telah popular selama-lamanya. Ideanya adalah bahawa tajuk besar dan bahagian kandungan utama menyelinap ke dalamnya dan bertindih dengan latar belakang tajuk. Cuma ada sesuatu yang menyenangkan dan selesa.
Fikiran saya menuju ke tempat yang sama dengan yang dilakukan Snook:
Dari segi sejarah, saya telah melakukan ini dengan margin negatif. Header mempunyai ketinggian yang menambah banyak padding ke bahagian bawah dan kemudian badan mendapat
margin-top: -50pxatau apa sahaja yang diperlukan oleh reka bentuk.
Tetapi kemudian dia memutuskan untuk melakukannya dengan grid CSS sebagai gantinya! Menarik. Kenapa? Itulah yang akan kita bahas. Grid hanya dapat terasa (dan sebenarnya) lebih kuat. Grid juga boleh lebih fleksibel. Sebagai contoh, max-heightdan automargin sangat bagus untuk berpusat, tetapi bagaimana jika anda mahu selokan tidak rata di tepinya? Itu sukar di sana, dan senang dengan Grid. Ethan Marcotte menulis:
Daripada hanya menjadi default
max-width, saya boleh menggunakan ruang kosong di sekitar reka bentuk saya, dan menganggapnya sebagai alat susun atur.
Saya cuba membalikkan idea Snook dalam video ini dan akhirnya membandingkannya dengan hasil akhir saya.
- Snook's
- Mine (membersihkan smidge post-video untuk estetika)