Snook publicou um artigo intitulado “Overlapping Header with CSS Grid”, onde ele olha para um padrão de design de cabeçalho que eu sinto que transcende tendências e é popular desde sempre. A ideia é que o cabeçalho seja superdimensionado e a área de conteúdo principal se esgueire para dentro dele e se sobreponha ao fundo do cabeçalho. Há apenas algo bom e reconfortante nisso.
Minha mente vai para o mesmo lugar que a de Snook:
Historicamente, tenho feito isso com margens negativas. O cabeçalho tem uma altura que adiciona um monte de preenchimento à parte inferior e, em seguida, o corpo recebe um
margin-top: -50pxou o que quer que o design exija.
Mas então ele decidiu fazer isso com CSS grid! Interessante. Porque? Bem, é nisso que entraremos. A grade pode parecer (e realmente ser) mais robusta. A grade também pode ser mais flexível. Por exemplo, as margens max-heighte autosão ótimas para centralizar, mas e se você quiser calhas desiguais nas bordas? Isso seria difícil lá e fácil com o Grid. Ethan Marcotte escreveu:
Em vez de simplesmente padronizar
max-widthcomo uma restrição, posso usar o espaço vazio ao redor do meu design e tratá-lo como uma ferramenta de layout.
Tento fazer a engenharia reversa da ideia de Snook neste vídeo e, finalmente, compará-la com o meu resultado final.
- Snook's
- Mine (limpou um pouco do pós-vídeo para a estética)