Skip to main content
Agregue codigo css
Origen Enlace

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.

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>

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.

Origen Enlace

¿En css grid porque las cuadriculas desbordan el contenedor cuando tengo imagenes dentro de divs?

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>