Ejercicio 7 – Galería de imágenes con Grid

📄 Objetivo

Distribuir elementos visuales de forma uniforme usando CSS Grid. El objetivo es crear una galería donde las imágenes se organicen automáticamente en columnas iguales y se adapten al ancho disponible.

💻 HTML base

<section class="galeria">
    <img src="img1.jpg" alt="">
    <img src="img2.jpg" alt="">
    <img src="img3.jpg" alt="">
    <img src="img4.jpg" alt="">
    <img src="img5.jpg" alt="">
    <img src="img6.jpg" alt="">
</section>
          

🎯 Requisitos CSS

• Mostrar las imágenes en una cuadrícula.
• Todas las columnas deben tener el mismo tamaño.
• Espacio uniforme entre imágenes.
• La galería debe adaptarse al ancho disponible.

✅ Solución (CSS)

Utilizamos repeat(3, 1fr) para crear tres columnas flexibles idénticas y la propiedad gap para el espaciado[cite: 379, 380].

.galeria {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.galeria img {
    width: 100%;
    height: auto;
    display: block;
}