Base de layout
Galería flexible que se adapta sola.
1
Usa un grid con mínimo por tarjeta para que el navegador calcule cuántas columnas caben.
2
Mantén un gap estable y evita anchuras fijas por tarjeta.
CSS
74
Componente galería: grid adaptable, ratio y estados
Construye una galería moderna con CSS Grid, recortes consistentes y microinteracciones accesibles.
Código del tema: display: grid; gap: 1rem;
📘 Teoría
Consistencia visual de miniaturas
Mismo bloque visual para orígenes de imagen distintos.
1
aspect-ratio define el marco y object-fit: cover recorta sin deformar.
2
Puedes añadir overlay en hover para mostrar título/acción sin cargar JS extra.
Galerías que llenan el lienzo completo
Cuando el objetivo no es solo listar imágenes, sino construir una superficie visual continua.
Hay galerías que funcionan casi como fondo o escaparate: importa tanto el número de celdas como el ritmo del mosaico. En esos casos, `Grid` define la estructura y `background-size`, `background-position` o `aspect-ratio` mantienen la lectura visual.
Si necesitas encajar exactamente un conjunto cerrado de imágenes en toda la ventana, un cálculo ligero puede decidir columnas y filas mientras CSS sigue resolviendo recorte, gap, overlays y estados hover.
- Usa `aspect-ratio` si todas las celdas deben conservar proporción fija.
- Usa `background-image` y `background-size: cover` cuando priorizas relleno uniforme sobre ratio original.
- Mantén el gap pequeño y consistente para que la retícula se lea como un sistema, no como tarjetas sueltas.