Maquetación Web Dinámica / Layouts II: CSS Grid completo
Patrones Grid reales: holy grail, dashboard, bento y revista
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:
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)
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:
<div class="bento">
<div class="celda grande">1<br><small>2×2</small></div>
<div class="celda">2</div>
<div class="celda">3</div>
<div class="celda ancha">4 <small>(2×1)</small></div>
<div class="celda">5</div>
<div class="celda">6</div>
</div>body { font-family: system-ui; padding: 16px; }
.bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 90px; gap: 10px; }
.celda { background: #ede9fe; color: #4c1d95; border-radius: 14px; display: grid; place-items: center; font-weight: 700; text-align: center; }
.celda small { font-weight: 400; font-size: 11px; }
.grande { grid-column: span 2; grid-row: span 2; background: #6d28d9; color: white; }
.ancha { grid-column: span 2; }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)
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.