Snook publikoval článok s názvom „Prekrývajúca sa hlavička s CSS Grid“, kde sa pozerá na vzor návrhu hlavičky, ktorý podľa mňa presahuje trendy a je navždy populárny. Ide o to, že hlavička je predimenzovaná a hlavná oblasť obsahu sa do nej vkradne a prekrýva pozadie hlavičky. Je na tom niečo celkom pekné a príjemné.
Moja myseľ ide na to isté miesto, kam Snook:
Historicky som to robil so zápornými maržami. Hlavička má výšku, ktorá dodáva dnu veľa výplne, a potom telo dostane
margin-top: -50pxalebo čokoľvek, čo dizajn vyžaduje.
Ale potom sa rozhodne namiesto toho urobiť s CSS mriežkou! Zaujímavé. Prečo? No a do toho sa pustíme. Mriežka sa môže cítiť (a v skutočnosti byť) silnejšia. Mriežka môže byť tiež pružnejšia. Napríklad max-heighta autookraje sú vynikajúce pri centrovaní, ale čo ak chcete mať na okrajoch nerovný žľab? To by bolo ťažké a s Gridom ľahké. Ethan Marcotte napísal:
Namiesto jednoduchého
max-widthobmedzenia ako obmedzenia môžem použiť prázdne miesto okolo môjho návrhu a považovať ho za nástroj na rozloženie.
V tomto videu sa snažím spätne analyzovať Snookov nápad a nakoniec ho porovnať s mojím konečným výsledkom.
- Snook
- Môj (pre estetiku vyčistený malý videozáznam)