Galería Grid CSS Responsiva

Al combinar display: grid y grid-template-columns: repeat(auto-fit, minmax(..., 1fr)), es posible crear una galería de imágenes fluida donde el número de columnas se adapta automáticamente al ancho del contenedor, eliminando por completo la necesidad de escribir media queries (@media).

Vista previa (Preview)

Casos de Uso y Características (Use Cases & Features)

Portafolios y galerías de fotos: Perfecto para exhibir imágenes de forma estructurada y atractiva.
Catálogos de productos en e-commerce: Muy útil para diseñar layouts de listados de tarjetas de productos.
Cero media queries: La combinación de auto-fit y minmax simplifica drásticamente el CSS, mejorando su mantenibilidad.

Diseño y Experiencia de Usuario (Design & UX)

Relación de aspecto constante: El uso conjunto de aspect-ratio: 1 / 1 y object-fit: cover garantiza una cuadrícula uniforme y estéticamente agradable, sin importar las proporciones originales de las imágenes.
Efectos hover: Incluye una microinteracción de elevación sutil (transform: translateY y scale) junto con una sombra pronunciada (box-shadow) al pasar el cursor, indicando claramente que el elemento es interactivo.
Transiciones fluidas: Emplea funciones de timing cubic-bezier para lograr animaciones mucho más naturales y pulidas.

Guía de Personalización (Customization Guide)

Ajustar el ancho mínimo: Modificando el valor 200px dentro de minmax(200px, 1fr), puedes controlar el tamaño base de cada celda. Un valor mayor reducirá la cantidad máxima de columnas por fila.
Modificar la relación de aspecto: Puedes cambiarlo fácilmente a aspect-ratio: 16 / 9 (apaisado) o aspect-ratio: 3 / 4 (retrato) según los requisitos de tu diseño.

Código de Implementación (Implementation)

index.html

<div class="gallery">
<img src="/gallery/1.png" alt="Gallery image 1" class="gallery-item" />
<img src="/gallery/2.png" alt="Gallery image 2" class="gallery-item" />
<img src="/gallery/3.png" alt="Gallery image 3" class="gallery-item" />
<img src="/gallery/4.png" alt="Gallery image 4" class="gallery-item" />
<img src="/gallery/5.png" alt="Gallery image 5" class="gallery-item" />
<img src="/gallery/6.png" alt="Gallery image 6" class="gallery-item" />
</div>

styles.css

.gallery {
display: grid;
/* Ajusta automáticamente el número de columnas dentro del rango que no caiga por debajo de 200px para llenar el contenedor */
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 16px;
padding: 16px;
width: 100%;
box-sizing: border-box;
}

.gallery-item {
width: 100%;
/* Mantiene siempre un cuadrado */
aspect-ratio: 1 / 1;
/* Recorta para que la proporción de la imagen no se distorsione */
object-fit: cover;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
            box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
cursor: pointer;
}

.gallery-item:hover {
/* Un ligero efecto de elevación al hacer hover */
transform: translateY(-4px) scale(1.02);
box-shadow: 0 12px 20px rgba(0, 0, 0, 0.1);
z-index: 10;
}

Soporte en Navegadores (Browser Support)

Propiedades como display: grid y aspect-ratio cuentan con un excelente soporte en todos los navegadores modernos (Chrome, Firefox, Safari, Edge).
Navegadores obsoletos (como IE11) no son compatibles; de ser necesario, se recomienda implementar un fallback con Flexbox.