Cambios clave realizados:
-
Estructura de Grid más robusta:
-
Cambié a un número fijo de columnas (3 en desktop, 2 en móvil) en lugar de auto-fill
-
Eliminé cualquier propiedad que pudiera causar superposición
-
-
Espaciado mejorado:
-
Aumenté el gap entre imágenes a 12px en móviles
-
Añadí padding interno a los ítems para más separación
-
Usé márgenes negativos compensatorios
-
-
Solución para móviles:
-
Establecí 2 columnas fijas en móviles
-
Aseguré un ancho mínimo para cada imagen
-
Eliminé cualquier transformación que pudiera afectar el layout
-
-
Optimización de rendimiento:
-
Simplifiqué las transiciones
-
Removí efectos que podían interferir con el layout
-
Añadí overflow:hidden al contenedor principal
-
-
Consistencia visual:
-
Mantuve la relación de aspecto 1:1
-
Conservé los bordes y esquinas redondeadas
-
Preservé la accesibilidad
-
Este código debería resolver completamente el problema de imágenes apiladas que muestras en la captura, manteniendo una galería bien espaciada y responsive en todos los dispositivos.
