Snook publicerade en artikel med titeln "Överlappande rubrik med CSS Grid" där han tittar på ett huvuddesignmönster som jag känner överskrider trender och har varit populär för alltid. Tanken är att rubriken är överdimensionerad och huvudinnehållet smyger in i det och överlappar huvudets bakgrund. Det är bara något trevligt och tröstande med det.
Mitt sinne går till samma plats som Snook gör:
Historiskt sett har jag gjort detta med negativa marginaler. Rubriken har en höjd som lägger till en massa vaddering i botten och sedan får kroppen en
margin-top: -50pxeller vad designen kräver.
Men då bestämmer han sig för att göra det med CSS-rutnät istället! Intressant. Varför? Det är det vi kommer in i. Rutnät kan bara kännas (och faktiskt vara) starkare. Rutnät kan också vara mer flexibelt. Till exempel, max-heightoch automarginaler är bra att centrera, men vad händer om du vill ha ojämna rännor i kanterna? Det skulle vara svårt där och enkelt med Grid. Ethan Marcotte skrev:
I stället för att bara använda
max-widthsom en begränsning kan jag använda det tomma utrymmet runt min design och behandla det som ett layoutverktyg.
Jag försöker göra om Snooks idé i den här videon och jämföra den i slutändan med mitt slutresultat.
- Snook's
- Gruva (rensade upp en smidge post-video för estetik)