Ejercicios de práctica de CSS

Ejercicio 16

Usa CSS Grid para crear un diseño de 3 filas y 3 columnas con elementos en una cuadrícula de imágenes.

Lo resolví del siguiente modo:

CSS:

                .grid-container {
                    display: grid;
                    grid-template-columns: repeat(3, 1fr);
                    grid-template-rows: repeat(3, 200px);
                    gap: 10px;
                }

                .grid-item {
                    background-color: #f4f4f4;
                    border: 1px solid #ddd;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }

                .grid-item img {
                    max-height: 100%;
                    width: auto;
                    max-width: 100%;
                }
            

HTML:

                <div class="grid-container">
                    <div class="grid-item"><img src="image1.jpg" alt="Imagen 1"></div>
                    <div class="grid-item"><img src="image2.jpg" alt="Imagen 2"></div>
                    <div class="grid-item"><img src="image3.jpg" alt="Imagen 3"></div>
                    <div class="grid-item"><img src="image4.jpg" alt="Imagen 4"></div>
                    <div class="grid-item"><img src="image5.jpg" alt="Imagen 5"></div>
                    <div class="grid-item"><img src="image6.jpg" alt="Imagen 6"></div>
                    <div class="grid-item"><img src="image7.jpg" alt="Imagen 7"></div>
                    <div class="grid-item"><img src="image8.jpg" alt="Imagen 8"></div>
                    <div class="grid-item"><img src="image9.jpg" alt="Imagen 9"></div>
                </div>