Snook offentliggjorde en artikel med titlen "Overlappende header med CSS Grid", hvor han ser på et headerdesignmønster, som jeg føler overskrider tendenser og har været populær for evigt. Ideen er, at overskriften er for stor, og hovedindholdsområdet sniger sig ind i det og overlapper baggrunden for overskriften. Der er bare noget godt og trøstende ved det.
Mit sind går til det samme sted, som Snook gør:
Historisk set har jeg gjort dette med negative margener. Overskriften har en højde, der tilføjer en masse polstring til bunden, og så får kroppen en
margin-top: -50pxeller hvad designet kræver.
Men så beslutter han at gøre det med CSS-gitter i stedet! Interessant. Hvorfor? Nå, det er det, vi kommer ind på. Gitter kan bare føles (og faktisk være) mere robust. Gitter kan også være mere fleksibelt. For eksempel, max-heightog automarginerne er gode til centrering, men hvad nu hvis du ønsker ujævne tagrender på kanterne? Det ville være svært der og nemt med Grid. Ethan Marcotte skrev:
I stedet for blot at være standard
max-widthsom en begrænsning kan jeg bruge det tomme rum omkring mit design og behandle det som et layoutværktøj.
Jeg forsøger at reverse engineering Snooks idé i denne video og sammenligner i sidste ende den med mit endelige resultat.
- Snook's
- Mine (ryddet op i en smidge post-video for æstetik)