0

En la estructura de mi layout, quiero que las 3 imágenes cargadas tomen lugar en 3 columnas distintas utilizando las herramientas de grid, aquí lo indico grid-template-columns: repeat (3, 250px); y no lo logro, quedan todas las imágenes en una misma columna.

Desde ya muchas gracias por tomarse el tiempo en responder!

.container {
    display: grid;
    grid-template-columns: repeat (3, 250px);
    grid-gap: 5px;
    justify-content: center;
}
.item {
    border-radius: 5px;
    padding: 10px;
    background: #f2f2f2;
}
.item img {
    max-width: 100%;
}
.item1 {
    grid-row-end: span 3;
}
.item2 {
    grid-row-end: span 2;
}
.item3 {
    grid-row-end: span 1;
}
<!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <meta http-equiv="X-UA-Compatible" content="ie=edge">
            <title>pinterest</title>
        </head>
        <body>
            <div class="container">
                <div class="item1">
                    <img src="http://lorempixel.com/400/200/" alt="">
                </div>
                <div class="item2">
                    <img src="http://lorempixel.com/400/200/" alt="">
                </div>
                <div class="item3">
                    <img src="http://lorempixel.com/400/200/" alt="">
                </div>
            </div>
        </body>
        </html>

1 respuesta 1

2

En principio esta todo correcto lo único es que has dejado un espacio entre repeat y el parentesis debería ser:

grid-template-columns: repeat(3, 250px);

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.