Snook publiserte en artikkel med tittelen “Overlapping Header with CSS Grid” der han ser på et headerdesignmønster som jeg føler overgår trender og har vært populært for alltid. Tanken er at overskriften er overdimensjonert og hovedinnholdsområdet sniker seg inn i den og overlapper bakgrunnen til overskriften. Det er bare noe ganske hyggelig og trøstende med det.
Mitt sinn går til samme sted som Snook gjør:
Historisk sett har jeg gjort dette med negative marginer. Overskriften har en høyde som gir en mengde polstring i bunnen, og deretter får kroppen en
margin-top: -50pxeller hva designen krever.
Men så bestemmer han seg for å gjøre det med CSS-rutenett i stedet! Interessant. Hvorfor? Vel, det er det vi kommer inn på. Rutenett kan bare føles (og faktisk være) solidere. Rutenett kan også være mer fleksibelt. For eksempel, max-heightog automargene er gode å sentrere, men hva om du vil ha ujevne takrenner i kantene? Det ville være vanskelig der, og enkelt med Grid. Ethan Marcotte skrev:
I stedet for å bare standardisere det
max-widthsom en begrensning, kan jeg bruke det tomme rommet rundt designet mitt, og behandle det som et layoutverktøy.
Jeg prøver å reversere Snooks ide i denne videoen, og til slutt sammenligne den med mitt endelige resultat.
- Snook's
- Mine (ryddet opp en smidge post-video for estetikk)