CSS Grid avanzado (grid-template-areas)

En esta lección definirás la estructura de una página completa dibujándola con nombres, de forma casi visual.

grid-template-areas permite describir la maquetación con cadenas de texto, una por fila, donde cada palabra es el nombre de una zona. Después, cada elemento declara a qué zona pertenece con grid-area: nombre. Repetir el mismo nombre en celdas contiguas hace que la zona las abarque todas.

En el código de ejemplo, la cabecera y el pie ocupan las dos columnas porque su nombre está repetido, mientras que la barra lateral y el contenido principal comparten la fila del medio. La propia declaración se lee casi como un dibujo de la página.

Hay dos reglas que hay que respetar: todas las filas deben tener el mismo número de palabras, y una zona debe formar siempre un rectángulo (no se pueden hacer formas en L). Si te saltas alguna, la declaración entera se ignora sin avisar.

Esta técnica brilla sobre todo con las media queries: puedes redefinir grid-template-areas para móvil y reorganizar toda la página apilándola en una columna, sin tocar ni una línea del HTML.