Snook published an article titled “Overlapping Header with CSS Grid” where he looks at a header design pattern that I feel transcends trends and has been popular forever. The idea is that the header is oversized and the main content area sneaks up into it and overlaps the background of the header. There is just something kinda nice and comforting about it.
My mind goes to the same place Snook’s does:
Historically, I’ve done this with negative margins. The header has a height that adds a bunch of padding to the bottom and then the body gets a
margin-top: -50pxor whatever the design calls for.
But then he decides to do it with CSS grid instead! Interesting. Why? Well that’s what we’ll get into. Grid can just feel (and actually be) sturdier. Grid can also be more flexible. For example, max-height and auto margins are great at centering, but what if you want uneven gutters on the edges? That would be hard there, and easy with Grid. Ethan Marcotte wrote:
Rather than simply defaulting to
max-widthas a constraint, I can use the empty space around my design, and treat it as a layout tool.
I try to reverse engineer Snook’s idea in this video then ultimately compare it to my final result.