Encabezado superpuesto con cuadrícula CSS

Snook muestra un diseño clásico con un encabezado de gran tamaño en la parte superior y un área de contenido que se “levanta” hacia esa área del encabezado. Mi mente va al mismo lugar:

Históricamente, he hecho esto con márgenes negativos. El encabezado tiene una altura que agrega mucho acolchado a la parte inferior y luego el cuerpo obtiene margin-top: -50pxlo que requiere el diseño.

Si combinas marginy paddingcon una situación como esta, no son exactamente números mágicos, pero aún así no me parece muy bien porque siguen siendo números que debes mantener sincronizados en elementos totalmente diferentes.

¿Su idea? En su lugar, constrúyalo con una cuadrícula CSS. Definitivamente se siente mucho más robusto.

Coincidencia aleatoria, estaba leyendo la publicación “El de negro y naranja” de Chen Hui Jing y el patrón apareció allí también.

(Terminé haciendo un vídeo sobre esto).

Enlace directo →