Ejercicio CSS 8

🖼️ Ejercicio 8: Galería de imágenes responsive

📌 Planteamiento:

Crea una **galería de imágenes responsive** que cumpla con lo siguiente:

• ✅ Usa display: grid para organizar las imágenes.
• ✅ Debe adaptarse a **3 columnas en pantallas grandes**, **2 en medianas** y **1 en móviles**.
• ✅ Cada imagen debe tener bordes redondeados y un pequeño efecto hover que aumente su tamaño.
• ✅ Las imágenes deben tener **espacios (gap)** entre ellas.

👉 Escribe el **CSS necesario** para lograr este diseño.

✅ Modelo de solución CSS:

.galeria {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  max-width: 900px;
  margin: auto;
}

.galeria img {
  width: 100%;
  border-radius: 10px;
  transition: transform 0.3s ease;
}

.galeria img:hover {
  transform: scale(1.05);
}

/* Ajustes responsive */
@media (max-width: 900px) {
  .galeria {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .galeria {
    grid-template-columns: 1fr;
  }
}
    

🎯 Claves de este ejercicio:

• 📍 Cómo usar CSS Grid para crear una galería flexible.
• 📍 Uso de media queries para adaptar la cantidad de columnas según el tamaño de pantalla.
• 📍 Implementación de un efecto hover sutil para mejorar la interacción.