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

Reto: bento grid estilo Apple con 7 celdas

Reto50 min60 XP

El bento grid es EL layout de presentación del momento — Apple, Vercel, Linear y media industria lo usan para sus páginas de features. Hoy construyes uno de 7 celdas con jerarquía real: no una cuadrícula pareja, sino una composición donde cada pieza pesa lo que su contenido importa.

Reto

Bento grid estilo Apple con 7 celdas

Media45 min60 XP(×2 sin mirar la solución)

Qué debes construir

Una sección "features" de un producto ficticio (elige tú: app, gadget, servicio) presentada como bento de 7 celdas sobre una retícula de 4 columnas:

<div class="bento">
<div class="celda hero"><h3>La celda héroe</h3><p>2×2 — el mensaje principal con más aire y jerarquía interna.</p></div>
<div class="celda"><h3>Rápida</h3><p>1×1</p></div>
<div class="celda"><h3>Segura</h3><p>1×1</p></div>
<div class="celda ancha"><h3>Panorámica</h3><p>2×1 — para un dato horizontal o una mini galería.</p></div>
<div class="celda alta"><h3>Vertical</h3><p>1×2 — estadística o imagen de retrato.</p></div>
<div class="celda"><h3>Simple</h3><p>1×1</p></div>
<div class="celda ancha oscura"><h3>El cierre</h3><p>2×1 con fondo invertido: el CTA.</p></div>
</div>

body { font-family: system-ui; padding: 16px; background: #f8fafc; }
.bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 88px; gap: 12px; }
.celda { background: white; border: 1px solid #e2e8f0; border-radius: 16px; padding: 16px; overflow: hidden; }
.celda h3 { margin: 0 0 4px; font-size: 15px; color: #1e293b; }
.celda p { margin: 0; font-size: 12px; color: #64748b; line-height: 1.5; }
.hero { grid-column: span 2; grid-row: span 2; background: linear-gradient(135deg, #6d28d9, #4c1d95); border: none; }
.hero h3 { color: white; font-size: 20px; }
.hero p { color: #ddd6fe; font-size: 13px; }
.ancha { grid-column: span 2; }
.alta { grid-row: span 2; }
.oscura { background: #0f172a; border: none; }
.oscura h3 { color: white; }
.oscura p { color: #94a3b8; }

Requisitos:

Retícula de 4 columnas con grid-auto-rows como módulo base y gap uniforme.
7 celdas con esta jerarquía: una héroe de 2×2, dos anchas de 2×1, una alta de 1×2 y tres simples de 1×1 — SIN huecos en la retícula.
La héroe con tratamiento especial: degradado del módulo 4, texto más grande, jerarquía interna clara.
Una celda con fondo invertido (oscuro) como acento de cierre.
Todas con el mismo border-radius generoso (14-16px) y overflow: hidden — la caligrafía del bento.
Bonus de diseño: sombra premium de dos capas en la héroe (módulo 4).

Reglas

Grid puro para la retícula; dentro de cada celda puedes usar lo que quieras (flex, grid, flujo normal).
Los spans van en las CELDAS, el módulo en el CONTENEDOR.
Cuadrar 7 celdas sin huecos en 4 columnas es parte del reto: haz la aritmética de celdas antes de escribir CSS (cada fila debe sumar 4).

45:00

Cuando estés listo, arranca el reloj.

El razonamiento: todo bento se decide en DOS lugares. En el contenedor: repeat(4, 1fr) + grid-auto-rows: 88px + gap: 12px — la retícula y su módulo. En las celdas: los spans según jerarquía de contenido (lo importante ocupa más módulos). La aritmética del ejemplo: fila 1-2 = hero (2×2) + dos simples apiladas... no — mira el dibujo real:

text

columnas:  1    2    3    4
fila 1   [ hero    ][ s1 ][ s2 ]
fila 2   [ hero    ][ ancha 1  ]
fila 3   [ alta ][ s3 ][ ??     ]
fila 4   [ alta ][ ancha 2 (CTA)]

Casi — la fila 3 queda con un hueco de 1 módulo si la dejas así. La solución del ejemplo: la "ancha 2" del cierre va en las columnas 2-3 de la fila 4 y el simple 3 baja... En la práctica: el HTML del ejemplo está ordenado para que la colocación automática cierre sola (hero, s1, s2, ancha, alta, s3, ancha-CTA). Compara con tu dibujo — hay VARIAS composiciones válidas de 7 celdas; lo innegociable es cero huecos y jerarquía clara.

El CSS completo es el de la vista previa; las decisiones que valen:

bento.css

Autoevaluación de diseñador: entrecierra los ojos frente a tu bento. ¿La mirada va primero a la héroe, luego al CTA oscuro, y el resto acompaña? Jerarquía lograda. ¿Todas las celdas gritan igual? Repasa la lección de jerarquía del módulo 4 — el bento es retícula + jerarquía, y la retícula era la parte fácil.

Qué sigue

Bento dominado. Cierra el módulo el PRIMER PROYECTO del curso: el dashboard completo — grid de app + grid de widgets + flexbox interno + subgrid donde haga falta. Todo lo que sabes, en una sola pieza de 90 minutos.