grid-template-areas: dibujar el layout

grid-template-areas es la única parte de CSS en la que el código se parece al resultado. Dibujas la rejilla con cadenas de texto, das un nombre a cada zona, y colocas los elementos por nombre en vez de por coordenadas. Suena a azúcar sintáctico y no lo es: cambia el sitio donde vive la decisión de layout, que pasa del elemento al contenedor, y eso tiene consecuencias directas en cómo se adapta un diseño.

La sintaxis

Cada cadena es una fila. Cada palabra dentro de la cadena es una celda de esa fila. Repetir un nombre en celdas contiguas define un área rectangular que las abarca todas.

.pagina {
  display: grid;
  grid-template-columns: 16rem 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "cabecera  cabecera"
    "lateral   principal"
    "pie       pie";
  gap: 1rem;
  min-block-size: 100dvh;
}

.pagina > header { grid-area: cabecera; }
.pagina > aside  { grid-area: lateral; }
.pagina > main   { grid-area: principal; }
.pagina > footer { grid-area: pie; }

Un punto . marca una celda vacía. Puedes usar varios seguidos, ..., que cuentan como una sola celda vacía, útil para alinear el dibujo visualmente.

grid-template-areas:
  "logo    ...     acciones"
  "nav     nav     nav";

La indentación con espacios extra no significa nada para el motor: sirve para que el dibujo se lea como una rejilla en el editor, y es una de las pocas veces en las que alinear el código con espacios tiene un valor real.

Las tres reglas de validez

Una definición de áreas inválida hace que la declaración entera se descarte, en silencio y sin ningún efecto visible salvo que el layout no es el que esperabas. Las tres reglas son estas.

Todas las filas deben tener el mismo número de celdas. Un nombre de más o de menos en una cadena invalida el conjunto. Es el error más frecuente y el más difícil de ver a simple vista, sobre todo con nombres de longitudes distintas.

Cada área debe formar un rectángulo. Un nombre repetido en celdas que no forman un rectángulo perfecto —una forma de L, una diagonal, dos bloques separados— es inválido. Grid no tiene áreas no rectangulares, ni las tendrá.

Un nombre no puede aparecer en dos zonas desconectadas. Es un corolario de la anterior, pero merece mención propia porque el caso aparece al intentar que un mismo elemento ocupe la esquina superior izquierda y la inferior derecha.

/* Inválido: la primera fila tiene 3 celdas y la segunda 2 */
grid-template-areas:
  "a b c"
  "d e";

/* Inválido: el área "a" forma una L, no un rectángulo */
grid-template-areas:
  "a a b"
  "a c c";

/* Válido */
grid-template-areas:
  "a a b"
  "a a c";

En DevTools, el panel de estilos tacha la declaración inválida, y el superpuesto de grid deja de mostrar los nombres de área. Son las dos señales que hay que buscar cuando un layout con áreas simplemente no ocurre.

Redefinir el dibujo entero

Aquí está la ventaja de arquitectura. Cuando colocas por números de línea, adaptar un layout obliga a tocar cada elemento:

/* Con líneas: cuatro reglas que cambiar, y hay que revisarlas todas juntas */
@media (max-width: 50rem) {
  header { grid-column: 1 / 2; grid-row: 1; }
  aside  { grid-column: 1 / 2; grid-row: 3; }
  main   { grid-column: 1 / 2; grid-row: 2; }
  footer { grid-column: 1 / 2; grid-row: 4; }
}

Con áreas, adaptas el layout en un solo sitio y los elementos no se enteran:

@media (max-width: 50rem) {
  .pagina {
    grid-template-columns: 1fr;
    grid-template-areas:
      "cabecera"
      "principal"
      "lateral"
      "pie";
  }
}

La diferencia no es de líneas de código: es que en la segunda versión el layout completo está descrito en un solo bloque legible, y puedes verificar de un vistazo que no falta ni sobra nada. En la primera, la corrección depende de que cuatro reglas separadas sean coherentes entre sí.

Y hay un detalle no obvio: en la versión con áreas, el orden visual ha cambiado —el lateral ahora va después del principal— sin tocar el HTML ni usar order. Eso arrastra el mismo problema de accesibilidad que ya conoces, y aquí hay que aplicar el mismo criterio: es aceptable si el orden del DOM sigue siendo un orden de lectura válido.

Cuándo las áreas no son la respuesta

Las áreas describen un layout fijo y nombrado. Si tu rejilla tiene un número variable de elementos, no sirven: no puedes nombrar áreas para un contenido que no conoces.

Una galería de tarjetas es de números de línea o de colocación automática, no de áreas. Un panel de control con zonas fijas y nombres con significado —cabecera, filtros, gráfico, tabla— es de áreas. La regla se puede enunciar así: si puedes dar a cada zona un nombre que signifique algo en el dominio, usa áreas; si los nombres serían celda1 y celda2, no.

También hay un caso mixto que funciona muy bien: áreas para la estructura de la página y colocación automática dentro de cada área.

.panel {
  display: grid;
  grid-template-areas: "filtros resultados";
  grid-template-columns: 18rem 1fr;
}
.resultados {
  grid-area: resultados;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr));
  gap: 1rem;
}