Snook, trendleri aştığını ve sonsuza kadar popüler olduğunu hissettiğim bir başlık tasarım modeline baktığı “CSS Grid ile Örtüşen Başlık” başlıklı bir makale yayınladı. Buradaki fikir, başlığın büyük olması ve ana içerik alanının gizlice içine girmesi ve başlığın arka planıyla örtüşmesidir. Bunda hoş ve rahatlatıcı bir şey var.
Aklım Snook'un yaptığı yere gidiyor:
Tarihsel olarak, bunu negatif marjlarla yaptım. Başlık, tabana bir sürü dolgu ekleyen bir yüksekliğe sahiptir ve ardından gövde bir
margin-top: -50pxveya tasarımın gerektirdiği her şeyi alır .
Ama sonra bunu CSS ızgarasıyla yapmaya karar veriyor! İlginç. Neden? Pekala, içine gireceğimiz şey bu. Izgara daha sağlam hissedebilir (ve aslında olabilir). Izgara ayrıca daha esnek olabilir. Örneğin, max-heightve automarjları ortalama en büyük, ama ne kenarlarında düzensiz olukları isterseniz? Bu orada zor ve Grid ile kolay olurdu. Ethan Marcotte şunu yazdı:
Varsayılanı
max-widthbir kısıtlama olarak varsaymak yerine , tasarımımın etrafındaki boş alanı kullanabilir ve bunu bir düzen aracı olarak değerlendirebilirim.
Bu videoda Snook'un fikrini tersine çevirmeye çalışıyorum ve sonunda bunu nihai sonucumla karşılaştırıyorum.
- Snook's
- Benimki (estetik için küçük bir video sonrası temizlendi)