Snook shows off a classic design with an oversized header up top, and a content area that is “pulled up” into that header area. My mind goes to the same place:
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.
If you match the margin and padding with a situation like this, it’s not exactly magic numbers, but it still doesn’t feel great to me beaus they’re still numbers you need to keep in sync across totally different elements.
His idea? Build it with CSS grid instead. Definitely feels much more robust.
Random coinsidence, I was reading Chen Hui Jing’s “The one in black and orange” post and the pattern showed up there as well.
(I ended up doing a video on this).
Direct Link to Article — Permalink
The post Overlapping Header with CSS Grid appeared first on CSS-Tricks.