CodeForge

Maquetación Web Dinámica / Layouts II: CSS Grid completo

Patrones Grid reales: holy grail, dashboard, bento y revista

Teoría22 min20 XP

Como en Flexbox, cierras la teoría con oficio: los cuatro esqueletos Grid que sostienen la mayoría de las interfaces — del layout clásico de tres columnas al bento grid que puso de moda Apple. Reconocerlos es maquetar al doble de velocidad.

1. El holy grail (header, 3 columnas, footer)

Se llamó "santo grial" porque durante 15 años fue LA búsqueda imposible: tres columnas de igual altura con footer abajo. Con áreas, son 8 líneas legibles:

holy-grail.css
body {
display: grid;
min-height: 100dvh;
grid-template-columns: 200px 1fr 200px;
grid-template-rows: auto 1fr auto;   /* main absorbe el sobrante */
grid-template-areas:
  "cabecera cabecera cabecera"
  "menu     contenido extra"
  "pie      pie       pie";
}

La fila 1fr del medio es el sticky footer del módulo 5, versión Grid — y de paso las tres columnas miden lo mismo de alto, gratis.

2. El dashboard (sidebar + topbar + lienzo)

dashboard.css
.app {
display: grid;
min-height: 100dvh;
grid-template-columns: 240px 1fr;
grid-template-rows: 56px 1fr;
grid-template-areas:
  "sidebar topbar"
  "sidebar lienzo";
}
/* dentro del lienzo: el grid de widgets con auto-fit */
.lienzo {
grid-area: lienzo;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 16px;
padding: 16px;
overflow-y: auto;
}

Nota la firma del patrón: el sidebar atraviesa las DOS filas (su nombre aparece en ambas). Y el lienzo es un grid DENTRO del grid — macro con áreas, micro con auto-fit, como dijimos en la lección 3.

3. El bento grid (la estrella del momento)

Retícula pareja + celdas que hacen span = el layout de cajita japonesa que Apple volvió tendencia:

Las claves: grid-auto-rows fija la altura del "módulo" base (todas las filas implícitas iguales), y cada pieza destacada toma sus spans. La armonía sale de que TODO es múltiplo del mismo módulo.

4. La revista editorial (romper la retícula con intención)

revista.css
.articulo {
display: grid;
grid-template-columns: 1fr min(65ch, 100%) 1fr;
}
.articulo > * { grid-column: 2; }  /* todo, en la columna de prosa */

/* las piezas destacadas ROMPEN hacia los márgenes */
.articulo > figure.destacada { grid-column: 1 / -1; }
.articulo > blockquote { grid-column: 1 / 3; }

El patrón de los blogs premium: la prosa vive centrada en su columna de 65ch, y las imágenes destacadas se estiran a sangre completa (full-bleed). La retícula existe PARA romperse con propósito.

En un bento grid, ¿qué propiedad garantiza que todas las celdas base midan lo mismo de alto?

Mini-reto

Convierte tu periódico al holy grail con áreas (si hiciste el mini-reto de la lección 3, ya casi lo tienes — agrega la fila 1fr y el min-height). Y juega 10 minutos con el bento del ejemplo: cambia spans y agrega celdas hasta que el patrón te quede en los dedos — lo vas a necesitar YA.

Qué sigue

Los cuatro esqueletos, en tu poder. Ahora el examen: el reto del bento grid estilo Apple con 7 celdas — y después, el primer PROYECTO del curso: un dashboard completo combinando todo lo que sabes.