Galería de Imágenes con CSS Grid
Las galerías de imágenes son uno de los casos de uso más poderosos para CSS Grid. Con Grid, puedes crear diseños de galería flexibles, responsivos y visualmente interesantes donde algunas imágenes pueden ocupar más espacio que otras.
A diferencia de los métodos tradicionales que requerían muchos contenedores anidados y cálculos complejos, CSS Grid simplifica enormemente la creación de galerías dinámicas.
Implementación básica
.galeria {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
grid-auto-rows: 250px;
gap: 20px;
}
.galeria-item {
overflow: hidden;
position: relative;
border-radius: 8px;
}
.galeria-item img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.galeria-item:hover img {
transform: scale(1.05);
}
Características avanzadas
Imágenes destacadas
Resalta ciertas imágenes haciéndolas ocupar más espacio en la cuadrícula.
.destacada { grid-column: span 2; grid-row: span 2; }
Totalmente responsiva
Se adapta a cualquier tamaño de pantalla manteniendo la estética.
grid-template-columns: repeat(auto-fill, minmax(250px,
1fr));
Layout denso
Rellena automáticamente los huecos para un diseño compacto.
grid-auto-flow: dense;
Efectos interactivos
Añade capas de información y animaciones al interactuar.
.hover-info { opacity: 0; transition: opacity 0.3s; }
Demostración
Explicación detallada
Masonry Layout
Inspirado en sitios como Pinterest, este layout crea una disposición de "ladrillos" donde las imágenes encajan perfectamente manteniendo su relación de aspecto.
.masonry-layout {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
grid-auto-rows: 200px;
grid-auto-flow: dense;
gap: 15px;
}
.large {
grid-column: span 2;
grid-row: span 2;
}
.wide {
grid-column: span 2;
}
.tall {
grid-row: span 2;
}
Adaptabilidad Responsiva
La combinación de auto-fill con
minmax() permite que la galería se adapte
automáticamente a cualquier tamaño de pantalla.
- auto-fill: Crea tantas columnas como quepan en el contenedor
- minmax(250px, 1fr): Cada columna debe tener al menos 250px, pero pueden crecer equitativamente
- grid-auto-flow: dense: Rellena los huecos automáticamente
Desafío
¿Te animas a mejorar esta galería? Intenta:
- Añadir filtros o categorías para mostrar sólo ciertas imágenes
- Implementar un lightbox para ver las imágenes en tamaño completo
- Crear un nuevo patrón de distribución para las imágenes
- Añadir animaciones más elaboradas al interactuar con las imágenes
Puedes usar el código como punto de partida para tus propios proyectos.