Snook menerbitkan artikel berjudul "Overlapping Header with CSS Grid" di mana dia melihat pola desain header yang menurut saya melampaui tren dan telah populer selamanya. Idenya adalah bahwa tajuk terlalu besar dan area konten utama menyelinap ke dalamnya dan tumpang tindih dengan latar belakang tajuk. Ada sesuatu yang agak menyenangkan dan menghibur tentang itu.
Pikiranku mengarah ke tempat yang sama dengan yang dilakukan Snook:
Secara historis, saya telah melakukan ini dengan margin negatif. Header memiliki ketinggian yang menambahkan banyak bantalan ke bagian bawah dan kemudian bodi mendapatkan
margin-top: -50pxatau apa pun yang diminta oleh desain.
Tapi kemudian dia memutuskan untuk melakukannya dengan CSS grid! Menarik. Mengapa? Nah itulah yang akan kita bahas. Grid hanya bisa terasa (dan sebenarnya) lebih kuat. Grid juga bisa lebih fleksibel. Misalnya, max-heightdan automargin sangat bagus dalam memusatkan, tetapi bagaimana jika Anda menginginkan talang yang tidak rata di tepinya? Itu akan sulit di sana, dan mudah dengan Grid. Ethan Marcotte menulis:
Daripada hanya menetapkan default
max-widthsebagai pembatas, saya dapat menggunakan ruang kosong di sekitar desain saya, dan memperlakukannya sebagai alat tata letak.
Saya mencoba merekayasa balik ide Snook dalam video ini, lalu membandingkannya dengan hasil akhir saya.
- Snook
- Milik saya (membersihkan smidge pasca-video untuk estetika)