grid-area

grid-area es la propiedad del ítem que lo vincula con el mapa de layout declarado en el contenedor. Tiene dos formas de uso completamente distintas: puede recibir el nombre de un área definida en grid-template-areas del contenedor, o puede actuar como shorthand de las cuatro propiedades de línea que controlan la posición exacta en la cuadrícula.

Cuando se usa con un nombre de área (grid-area: header), el ítem se coloca automáticamente en la zona que el contenedor llamó header. Esta forma es la más legible: el CSS del ítem declara su intención semántica (“soy el header”) sin necesidad de contar líneas. Es el complemento natural de grid-template-areas: el contenedor dibuja el mapa, el ítem se ubica en él con su nombre.

La segunda forma — como shorthand de cuatro líneas — es equivalente a escribir grid-row-start / grid-column-start / grid-row-end / grid-column-end en un solo valor. Esta forma existe porque agrupa toda la información de posición en una propiedad, pero el orden es inusual y confunde: es fila antes que columna, lo contrario de la intuición (x, y). En la práctica se usa menos que la forma nombrada; cuando no hay áreas definidas en el contenedor, grid-column y grid-row por separado son más legibles.

Sintaxis

/* Forma 1: nombre de área (la más común y legible) */
.header  { grid-area: header; }
.nav     { grid-area: nav; }
.main    { grid-area: main; }
.footer  { grid-area: footer; }

/* Forma 2: shorthand de cuatro líneas */
/* Orden: row-start / column-start / row-end / column-end */
.item { grid-area: 1 / 1 / 3 / 2; }   /* filas 1-2, columna 1 */
.item { grid-area: 2 / 1 / 3 / -1; }  /* fila 2, todas las columnas */

/* Con span */
.item { grid-area: 1 / 1 / span 2 / span 3; }

Valores y sub-bloques

Nombre de área (forma principal)

grid-area: nombre asocia el ítem a una zona definida con grid-template-areas en el contenedor. El nombre va sin comillas — las comillas son solo para el valor del contenedor (los strings de fila). Si el nombre que se declara no existe en grid-template-areas, el ítem queda sin ubicación declarada y el algoritmo de auto-placement lo coloca en el próximo espacio disponible.

/* En el contenedor */
.pagina {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: 60px 1fr 50px;
  grid-template-areas:
    "header  header"
    "nav     main"
    "footer  footer";
}

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

El nombre en grid-area y el nombre en grid-template-areas deben coincidir exactamente — son sensibles a mayúsculas. Header y header son áreas distintas.

Shorthand de cuatro líneas

Cuando grid-area recibe uno a cuatro valores separados por /, actúa como shorthand de grid-row-start / grid-column-start / grid-row-end / grid-column-end. El orden es fila antes que columna — lo contrario de la convención (x, y) habitual, y una fuente frecuente de confusión.

/* grid-area: row-start / col-start / row-end / col-end */
.item { grid-area: 1 / 2 / 3 / 4; }

/* Es equivalente a: */
.item {
  grid-row-start: 1;
  grid-column-start: 2;
  grid-row-end: 3;
  grid-column-end: 4;
}

Si se omiten valores, se aplica auto para los faltantes:

.item { grid-area: 1 / 1; }
/* = grid-row-start: 1; grid-column-start: 1; grid-row-end: auto; grid-column-end: auto; */

Cuándo usar áreas nombradas vs líneas

La forma nombrada es más legible y mantenible para layouts estructurales. La forma de líneas es más concisa cuando se necesita posicionar un único ítem con coordenadas exactas sin definir nombres de área.

Resultado

Notas, gotchas e interacción

• grid-area con nombre solo funciona si el contenedor declaró ese nombre en grid-template-areas. Si no existe el área, el ítem flota al siguiente espacio disponible por auto-placement, sin error visible. Es un fallo silencioso: revisá el contenedor cuando un ítem no aparezca donde esperás.
• El orden del shorthand es fila/columna, no columna/fila. grid-area: 1 / 2 / 3 / 4 pone el ítem en fila 1 (row-start) y columna 2 (col-start). La intuición geométrica de (x,y) es columna/fila — acá es al revés. Error frecuente en código que mezcla ambas formas.
• grid-area con un nombre anula grid-column y grid-row. Son propiedades que operan sobre la misma posición del ítem. Si declarás grid-area: main y también grid-column: 2 / 4, el último declarado en cascade gana.
• Áreas sensibles a mayúsculas. Main y main son dos áreas distintas. Convención: todo en minúsculas.
• grid-area nombrado no genera líneas de nombre en el grid. Las líneas implícitas con nombre ([header-start], [header-end]) sí se crean automáticamente cuando se usa grid-template-areas — pero eso es una propiedad del contenedor, no del ítem.
• Interacción con justify-self y align-self: grid-area determina qué celda o área ocupa el ítem; justify-self y align-self controlan cómo se alinea el ítem dentro de esa celda o área.

Vigente / legacy

grid-area es parte del estándar CSS Grid Level 1 (2017) y es baseline widely available. No existe técnica legacy equivalente para la forma nombrada — la vinculación semántica de un ítem a una zona es exclusiva de Grid. La forma de shorthand de líneas sí tiene equivalente en los longhands individuales (grid-row-start, grid-column-start, etc.), que son más verbosos pero igualmente vigentes.