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>