Snook publicó un artículo titulado "Encabezado superpuesto con cuadrícula CSS" donde observa un patrón de diseño de encabezado que creo que trasciende las tendencias y ha sido popular desde siempre. La idea es que el encabezado sea de gran tamaño y el área de contenido principal se cuele y se superponga al fondo del encabezado. Hay algo agradable y reconfortante al respecto.
Mi mente va al mismo lugar que lo hace Snook:
Históricamente, he hecho esto con márgenes negativos. El encabezado tiene una altura que agrega un montón de relleno en la parte inferior y luego el cuerpo obtiene un
margin-top: -50pxo lo que requiera el diseño.
¡Pero luego decide hacerlo con CSS grid! Interesante. ¿Por qué? Bueno, eso es en lo que entraremos. Grid puede sentirse (y realmente ser) más resistente. La cuadrícula también puede ser más flexible. Por ejemplo, max-heighty autolos márgenes son muy buenos para el centrado, pero lo que si quieres canaletas irregulares en los bordes? Eso sería difícil y fácil con Grid. Ethan Marcotte escribió:
En lugar de simplemente establecer
max-widthcomo una restricción, puedo usar el espacio vacío alrededor de mi diseño y tratarlo como una herramienta de diseño.
Intento aplicar ingeniería inversa a la idea de Snook en este video y finalmente compararla con mi resultado final.
- Snook's
- Mine (limpió un post-video smidge por estética)