Construye una galería moderna con CSS Grid, recortes consistentes y microinteracciones accesibles.
Una buena galería necesita consistencia de recorte, separación y respuesta a distintos anchos.
Grid con <code>repeat(auto-fit, minmax())</code> resuelve gran parte del layout sin media queries complejas.
Con <code>object-fit</code> y <code>aspect-ratio</code> mantienes miniaturas limpias aunque las imágenes originales sean distintas.
En proyectos más editoriales o inmersivos también puede interesarte llenar un lienzo completo con un número exacto de celdas: ahí CSS sigue mandando en el recorte y el ritmo visual, aunque un pequeño apoyo de JavaScript calcule el reparto final.
Galería flexible que se adapta sola.
Usa un grid con mínimo por tarjeta para que el navegador calcule cuántas columnas caben.
Mantén un gap estable y evita anchuras fijas por tarjeta.
Mismo bloque visual para orígenes de imagen distintos.
<code>aspect-ratio</code> define el marco y <code>object-fit: cover</code> recorta sin deformar.
Puedes añadir overlay en hover para mostrar título/acción sin cargar JS extra.
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.
Construye una galería moderna con CSS Grid, recortes consistentes y microinteracciones accesibles.
Código del tema: display: grid; gap: 1rem;
Galería flexible que se adapta sola.
Usa un grid con mínimo por tarjeta para que el navegador calcule cuántas columnas caben.
Mantén un gap estable y evita anchuras fijas por tarjeta.
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 12px;
}Mismo bloque visual para orígenes de imagen distintos.
aspect-ratio define el marco y object-fit: cover recorta sin deformar.
Puedes añadir overlay en hover para mostrar título/acción sin cargar JS extra.
.thumb {
aspect-ratio: 4 / 3;
overflow: hidden;
border-radius: 12px;
}
.thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}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.