¿Cómo funcionan `grid-template-areas` y las cuadrículas responsive?

Question

Accepted Answer

`grid-template-areas` te permite diseñar una cuadrícula **visualmente** nombrando regiones, haciendo que los diseños de página complejos sean legibles y fáciles de reorganizar responsivamente.

## Definición de áreas nombradas

```css
.layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header  header"   /* row 1: header spans both columns */
    "sidebar main"     /* row 2: sidebar | main */
    "footer  footer";  /* row 3: footer spans both */
  min-height: 100vh;
}

.header  { grid-area: header; }   /* assign each element to a named area */
.sidebar { grid-area: sidebar; }
.main    { grid-area: main; }
.footer  { grid-area: footer; }
```

El `grid-template-areas` de tipo ASCII *es* el diseño — puedes ver la estructura de un vistazo, y repetir un nombre hace que una región se extienda por celdas.

## Reorganización para móvil — simplemente redibuja el mapa

```css
@media (max-width: 600px) {
  .layout {
    grid-template-columns: 1fr;        /* single column */
    grid-template-areas:
      "header"
      "main"      /* main now ABOVE sidebar on mobile */
      "sidebar"
      "footer";
  }
}
```

Para cambiar el diseño completo para móvil, simplemente reescribes el mapa de áreas — el HTML y las asignaciones de `grid-area` siguen siendo idénticas. Esto es mucho más limpio que reposicionar cada elemento individualmente.

## Por qué esto es poderoso

- **Autodocumentado** — CSS refleja visualmente el diseño renderizado.
- **Desacoplado del orden de origen** — los elementos pueden colocarse en cualquier lugar independientemente del orden HTML (bien para poner `main` primero en el DOM para accesibilidad, pero mostrar la barra lateral visualmente primero).
- **Flujo responsive fácil** — intercambia la plantilla de área por punto de ruptura.

## Por qué es importante

Las áreas de cuadrícula nombradas hacen que los diseños de nivel de página (encabezado/barra lateral/principal/pie) sean tanto legibles como trivialmente responsive — la reestructuración es cuestión de editar un mapa ASCII, no de reconectar posiciones.

Es una de las técnicas de diseño más claras y mantenibles que CSS ofrece.