Snook publiceerde een artikel getiteld "Overlapping Header with CSS Grid" waarin hij kijkt naar een header-ontwerppatroon dat naar mijn mening trends overstijgt en altijd populair is geweest. Het idee is dat de koptekst te groot is en dat het hoofdinhoudsgebied erin sluipt en de achtergrond van de koptekst overlapt. Er is gewoon iets aardigs en geruststellends aan.
Mijn gedachten gaan naar dezelfde plaats die Snook's doet:
Historisch gezien heb ik dit gedaan met negatieve marges. De kop heeft een hoogte die een hoop opvulling aan de onderkant toevoegt en dan krijgt het lichaam een
margin-top: -50pxof wat het ontwerp ook vraagt.
Maar dan besluit hij het in plaats daarvan met CSS-raster te doen! Interessant. Waarom? Dat is waar we op ingaan. Grid kan gewoon steviger aanvoelen (en eigenlijk zijn). Grid kan ook flexibeler zijn. Bijvoorbeeld, max-heighten autode marges zijn goed in het centreren, maar wat als je wilt ongelijke goten aan de randen? Dat zou daar moeilijk zijn, en gemakkelijk met Grid. Ethan Marcotte schreef:
In plaats van dit simpelweg
max-widthals een beperking te gebruiken, kan ik de lege ruimte rond mijn ontwerp gebruiken en het als een lay-outtool behandelen.
Ik probeer het idee van Snook in deze video te reverse-engineeren en het uiteindelijk te vergelijken met mijn uiteindelijke resultaat.
- Snook's
- Mine (een smidge post-video opgeschoond voor esthetiek)