0

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>´´´

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.

1
  • @BetaM Ya edite la pregunta y agregue el css.
    – Carlos
    Commented el 1 jun. 2020 a las 3:51

1 respuesta 1

0

Añada a la clase .item {position:relative} y añada una clase a las imágenes con, .claseImg {position:absolute}. IMPORTANTE: No coloque los divs con saltos de linea, ubiquelos pegados al cierre de cada div, aveces ésto puede agregar 1px por contenedor, si tengo 10 imágenes, hará un desfase de 10px al final.

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.