Maquetación Web Dinámica / Layouts I: Flexbox completo

Reto: galería tipo Pinterest con flex-wrap

Reto35 min60 XP

Cierre del módulo: una galería de tarjetas que se acomodan solas a cualquier ancho de pantalla — el patrón de Pinterest, simplificado a lo que Flexbox hace bien. Sin una sola media query: la elasticidad sale de las propiedades que ya dominas.

Reto

Galería tipo Pinterest con flex-wrap

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

Qué debes construir

Una galería de 8 tarjetas de "ideas" con esta conducta:

<div class="galeria">
<article class="pin"><div class="img alta"></div><p>Paleta tierra para interiores</p></article>
<article class="pin"><div class="img"></div><p>Recetas de 15 minutos</p></article>
<article class="pin"><div class="img baja"></div><p>Setup minimalista</p></article>
<article class="pin"><div class="img"></div><p>Tipografía editorial</p></article>
<article class="pin"><div class="img baja"></div><p>Jardines verticales</p></article>
<article class="pin"><div class="img alta"></div><p>Café de especialidad</p></article>
<article class="pin"><div class="img"></div><p>Rutas de senderismo</p></article>
<article class="pin"><div class="img baja"></div><p>Cerámica hecha a mano</p></article>
</div>

body { font-family: system-ui; padding: 16px; background: #f8fafc; }
.galeria { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; }
.pin { flex: 1 1 160px; max-width: 260px; background: white; border: 1px solid #e2e8f0; border-radius: 12px; overflow: hidden; }
.img { background: linear-gradient(135deg, #6d28d9, #2563eb); height: 110px; }
.img.alta { height: 160px; background: linear-gradient(135deg, #b45309, #dc2626); }
.img.baja { height: 80px; background: linear-gradient(135deg, #047857, #2563eb); }
.pin p { margin: 0; padding: 10px 12px; font-size: 13px; font-weight: 600; color: #1e293b; }

Requisitos:

8 tarjetas article, cada una con una "imagen" (un div con degradado — practica los del módulo 4) y un título corto.
Las imágenes tienen ALTURAS DISTINTAS (3 variantes) — es lo que da el sabor Pinterest.
Las tarjetas doblan solas: ~4 columnas en ancho, 2 en tablet, 1 en móvil angosto. Cero media queries.
Cada fila queda llena de borde a borde (las tarjetas crecen para llenar), pero ninguna tarjeta pasa de ~260px.
Con alturas distintas, las tarjetas de cada fila deben quedar ancladas ARRIBA (no estiradas ni centradas).

Reglas

Solo Flexbox: display flex, wrap, gap y la familia flex en los ítems.
La esquina redondeada de la tarjeta debe recortar la imagen (pista: lo aprendiste en el módulo 3).

30:00

Cuando estés listo, arranca el reloj.

El razonamiento: tres decisiones resuelven todo. flex: 1 1 160px en las tarjetas define el punto de doblado y el permiso de crecer; max-width le pone techo a ese crecimiento (sin él, la última fila con una sola tarjeta sería un banner gigante); y align-items: flex-start en el contenedor apaga el stretch para que las alturas variables se noten, que es todo el encanto Pinterest. El overflow: hidden en la tarjeta hace que el border-radius recorte la imagen (módulo 3 aplicado).

styles.css

Nota honesta de arquitecto: el Pinterest REAL es un masonry (las tarjetas de la fila 2 suben a rellenar los huecos verticales). Flexbox con wrap no hace eso — alinea por filas. Para masonry de verdad hay técnicas con columnas y con Grid que verás en el módulo 6. Lo que construiste hoy es el 90% de las galerías reales de la web: filas elásticas con tarjetas de altura natural. El 10% restante ya tiene módulo asignado.

Qué sigue

Módulo 5 completo: Flexbox de arriba a abajo — ejes, alineación, reparto, multilíneas, excepciones, los 5 patrones y dos retos de producción. El módulo 6 trae a su hermano bidimensional: CSS Grid — filas Y columnas a la vez, y con él, los layouts de página completa.