Estoy intentando hacer una galeria de imagenes con css grid pero las cuadriculas desbordan el contenedor, cuando solo pongo divs dentro del container todo va bien, el problema es cuando anido imagenes dentro de los divs.
<div class="container">
<div class="item"><img src="img/im1.jpg" alt=""></div>
<div class="item"><img src="img/im2.jpg" alt=""></div>
<div class="item"><img src="img/im3.jpg" alt=""></div>
<div class="item"><img src="img/im4.jpg" alt=""></div>
<div class="item"><img src="img/im14.jpg" alt=""></div>
<div class="item"><img src="img/img.jpg" alt=""></div>
<div class="item"><img src="img/img0.jpg" alt=""></div>
<div class="item"><img src="img/img5.jpg" alt=""></div>
<div class="item"><img src="img/img6.jpg" alt=""></div>
<div class="item"><img src="img/img7.jpg" alt=""></div>
<div class="item"><img src="img/img8.jpg" alt=""></div>
<div class="item"><img src="img/img9.jpg" alt=""></div>
</div>div>´´´
Aqui esta el codigo css:
* {
box-sizing: border-box;
}
body {
margin: 0;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.container {
width: 80%;
height: 600px;
background-color: hsla(140, 100%, 50%, 0.5);
display: grid;
grid-gap: 3px;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(3, 1fr);
}
.container img {
width: 100%;
object-fit: cover;
}
Gracias de antemano.