Layouts nombrados: grid-template-areas y grid-area

Con grid-column/grid-row ubicás ítems por líneas numéricas — preciso pero difícil de leer. grid-template-areas ofrece una alternativa visual: nombrás las zonas del layout con strings y el CSS se auto-documenta.

`grid-template-areas` — el mapa del layout

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

El valor es una lista de strings, uno por fila. Cada palabra es el nombre de un área. Los nombres repetidos en una fila indican que esa área ocupa múltiples columnas ("header header" → header abarca las 2 columnas). Los puntos (.) son celdas vacías.

Regla de validez: las áreas DEBEN ser rectángulos. "a a" "b a" es inválido porque a no forma un rectángulo — el navegador ignora toda la declaración.

Legibilidad: al leer el CSS ves el layout. Es el patrón preferido para estructuras de página (header/nav/main/footer).

`grid-area` — asociar el ítem a su zona

Los ítems se asocian a las áreas con grid-area:

.header  { grid-area: header; }
.nav     { grid-area: nav; }
.main    { grid-area: main; }
.footer  { grid-area: footer; }

El nombre de área va sin comillas en grid-area — las comillas solo van en grid-template-areas (son strings de filas).

Puntos para celdas vacías

.layout {
  grid-template-areas:
    "header header header"
    "nav    main   ."      /* la última celda de la fila 2 queda vacía */
    "footer footer footer";
}

El punto (.) reserva la celda pero no la asigna a ningún ítem.

Nombres en español — por qué

El ejercicio usa cabecera, nav, main, pie como nombres de área en lugar de header/footer. Ambas opciones son válidas en CSS — se prefieren los nombres en español para que el alumno no confunda el nombre del área con el elemento HTML <header>/<footer>.

Lo que el motor no puede validar: que el layout visual quede con el header arriba, el nav a la izquierda y el contenido a la derecha. Lo verificás en el preview.

Tu turno: completá .layout con las áreas y el gap, y asociá cada hijo a su zona con grid-area. Observá en el preview el layout de página completo.