grid-template-areas

grid-template-areas define el layout de un grid con nombres de zona en lugar de coordenadas numéricas. En vez de calcular en qué línea empieza y termina cada ítem, el desarrollador describe el layout visualmente: una string por fila, con el nombre del área que ocupa cada celda. El CSS resultante es auto-documentado — al leerlo se ve directamente la estructura de la página.

Esta propiedad es especialmente valiosa para layouts estructurales: el clásico header/nav/main/footer de una página, un dashboard con zonas bien definidas, cualquier layout donde la disposición de las zonas tiene semántica propia. En esos casos, grid-template-areas hace que el CSS comunique la intención de diseño de forma mucho más clara que las propiedades de líneas numéricas (grid-column, grid-row).

grid-template-areas opera siempre en conjunto con grid-template-columns y grid-template-rows: las áreas necesitan pistas para existir. Y los ítems se asocian a las áreas con la propiedad grid-area — que en el lado del ítem no lleva comillas. La propiedad grid-area del ítem se documenta en grid-area.

Sintaxis

.pagina {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: 60px 1fr 50px;
  grid-template-areas:
    "header  header"
    "nav     main"
    "footer  footer";
  gap: 16px;
}

/* Los ítems se asocian a su área con grid-area (sin comillas) */
.header  { grid-area: header; }
.nav     { grid-area: nav; }
.main    { grid-area: main; }
.footer  { grid-area: footer; }

El valor de grid-template-areas es una lista de strings, una por fila. Cada palabra en el string es el nombre de un área. Las comillas delimitan cada fila — no son opcionales. El nombre sin comillas en grid-area del ítem es lo que crea la asociación.

Valores y sub-bloques

Nombres de área

Un nombre de área puede ser cualquier identificador CSS válido: sin espacios, puede contener letras, números y guiones. Conviene usar nombres semánticos que describan la zona: header, sidebar, main, footer, hero, aside.

Los nombres repetidos en la misma fila indican que el área ocupa varias columnas. "header header" con dos columnas declaradas significa que el header abarca las dos columnas de esa fila. Si la misma área aparece en varias filas consecutivas, el área abarca también esas filas.

grid-template-areas:
  "header  header  header"   /* header cubre las 3 columnas */
  "nav     main    sidebar"
  "footer  footer  footer";  /* footer cubre las 3 columnas */

. — celda vacía

Un punto (.) en el string indica que esa celda no pertenece a ningún área. La celda queda reservada pero sin asignar a ningún ítem.

grid-template-areas:
  "header  header"
  "nav     main"
  "nav     .";      /* la celda inferior derecha queda vacía */

Se pueden usar varios puntos consecutivos para mayor claridad: ".. .. main" y ". . main" son equivalentes.

La regla del rectángulo

Cada área debe formar un rectángulo. Esta es la restricción más importante de grid-template-areas. Un área no puede tener forma de L, T, ni ninguna otra figura no rectangular. Si el layout declara un área que no forma un rectángulo, el navegador ignora toda la declaración de grid-template-areas — como si no existiera.

/* ❌ INVÁLIDO: el área "a" no es un rectángulo */
grid-template-areas:
  "a a b"
  "c a b";

/* ✅ VÁLIDO: todas las áreas son rectángulos */
grid-template-areas:
  "a a b"
  "a a b";

Relación con grid-template-columns y grid-template-rows

Las áreas no crean las pistas — solo las nombran. Para que el layout funcione, el contenedor necesita declarar las pistas que corresponden a las filas y columnas que aparecen en los strings:

.pagina {
  display: grid;
  /* 2 nombres por fila → 2 columnas */
  grid-template-columns: 200px 1fr;
  /* 3 filas de strings → 3 filas */
  grid-template-rows: 60px 1fr 50px;
  grid-template-areas:
    "nav  main"
    "nav  main"
    "pie  pie";
}

Si grid-template-rows no se declara, las filas se crean automáticamente con height: auto. Si el número de palabras en un string no coincide con el número de columnas definido, el navegador puede ignorar la declaración o producir un layout inesperado.

grid-area en el ítem (lado contenedor vs lado ítem)

grid-template-areas define las zonas en el contenedor. La asociación del ítem a su zona se hace con grid-area en cada ítem — sin comillas, solo el nombre del área:

/* En el contenedor */
.layout {
  grid-template-areas:
    "header header"
    "nav    main";
}

/* En cada ítem */
.header { grid-area: header; }  /* sin comillas */
.nav    { grid-area: nav; }
.main   { grid-area: main; }

La propiedad grid-area del ítem, junto con grid-column/grid-row, justify-self y align-self, se documentan en sus entradas propias.

Cuándo usarlo

Usá grid-template-areas cuando el layout tiene zonas bien definidas con nombres semánticos. Es especialmente útil cuando:

• El layout cambia con media queries (basta con redefinir grid-template-areas en el breakpoint).
• Hay zonas que abarcan varias columnas o filas (más legible que contar líneas).
• Quieras que el CSS comunique la intención de diseño a quien lo lea.

Para ubicar ítems con precisión en coordenadas exactas sin nombres fijos, grid-column y grid-row son más adecuados.

Resultado

Notas, gotchas e interacción

• La regla del rectángulo es un error silencioso. Si un área no forma un rectángulo, el navegador descarta toda la propiedad grid-template-areas sin lanzar ninguna advertencia visible. El layout se “rompe” sin mensaje de error obvio — hay que verificar en DevTools.
• Los nombres son sensibles a mayúsculas. Header y header son áreas distintas. Lo más seguro es usar siempre minúsculas.
• . no crea un área llamada ”.” — es una celda vacía, no un nombre. No se puede asociar ningún ítem a ella con grid-area: ..
• Cada fila debe tener el mismo número de celdas. Si una fila tiene 2 nombres y otra tiene 3, la declaración es inválida.
• El punto de quiebre responsive más limpio de CSS. En una media query basta con redefinir grid-template-areas y grid-template-columns para cambiar completamente el layout sin tocar el HTML ni los selectores de los ítems.
• Interacción con gap: el gap agrega espacio entre las áreas — el mismo que entre cualquier par de celdas.

Vigente / legacy

grid-template-areas es parte del estándar CSS Grid Level 1 (2017) y es baseline widely available. No existe ninguna técnica legacy equivalente: la declaración visual de layouts con strings es exclusiva de Grid.