grid-template-areas: layouts que se dibujan

De todas las formas de definir un layout en CSS, ninguna es tan legible como esta: dibujas el plano de la página con palabras, y Grid lo construye. Seis meses después, cualquiera (incluido tu yo futuro) entiende el layout de un vistazo — porque está literalmente dibujado en el código.

El plano dibujado

.pagina {
display: grid;
grid-template-columns: 250px 1fr;
grid-template-areas:
  "cabecera cabecera"
  "menu     contenido"
  "pie      pie";
gap: 12px;
}

/* cada hijo declara QUÉ es, no DÓNDE va */
.pagina > header { grid-area: cabecera; }
.pagina > nav    { grid-area: menu; }
.pagina > main   { grid-area: contenido; }
.pagina > footer { grid-area: pie; }

Las reglas del dibujo: cada string es una FILA; cada palabra, una CELDA (deben coincidir con el número de columnas); repetir el nombre expande el área (cabecera ocupa las dos columnas); y un punto (.) deja la celda vacía.

<div class="pagina">
<header>cabecera</header>
<nav>menu</nav>
<main>contenido</main>
<aside>extra</aside>
<footer>pie</footer>
</div>

body { font-family: system-ui; padding: 16px; }
.pagina {
display: grid;
grid-template-columns: 140px 1fr 140px;
grid-template-areas:
  "cabecera cabecera cabecera"
  "menu     contenido extra"
  "pie      pie       pie";
gap: 8px;
min-height: 260px;
}
header { grid-area: cabecera; }
nav { grid-area: menu; }
main { grid-area: contenido; }
aside { grid-area: extra; }
footer { grid-area: pie; }
header, nav, main, aside, footer {
background: #ede9fe; color: #4c1d95; font-weight: 600; font-size: 14px;
border-radius: 8px; display: grid; place-items: center; padding: 12px;
}
main { background: #6d28d9; color: white; }

El superpoder: reordenar sin tocar el HTML

Aquí está la razón por la que este método domina los layouts de página: el responsive se vuelve REDIBUJAR. El mismo HTML, otro plano:

/* En pantallas angostas: todo apilado (lo verás formal en el módulo 8) */
.pagina-movil {
grid-template-columns: 1fr;
grid-template-areas:
  "cabecera"
  "contenido"
  "menu"
  "extra"
  "pie";
}

Nota que el contenido SUBIÓ por encima del menú — una decisión editorial (lo importante primero en móvil) que costó cero cambios de HTML. La misma advertencia de order aplica: el lector de pantalla sigue el HTML, así que reordena con propósito, no por deporte.

Mini-reto

Reconstruye tu periódico entero con áreas: cabecera, contenido, "lo más leído" (extra) y pie — usa el ejemplo como base. Luego redibuja el plano poniendo el aside a la IZQUIERDA. Un solo bloque de CSS cambiado, layout nuevo.

Qué sigue

Dibujas layouts. La próxima lección resuelve las galerías: auto-fit y auto-fill — grids que deciden solos cuántas columnas caben. El responsive sin media queries, versión Grid.