unable to fit three images inside their grid container-CodePudding

I can't figure out how to solve this problem:

.picture-container {
  position: absolute;
  top: 36%; 
  width: 90%;
  left: 5%;
  
  border: 5px dashed red;
}

.three-image-container {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 20px;
}

.img-frame-container {

}


.img-frame {
  border: 5px solid #e8e8e8;
  box-shadow: 1px 7px 20px 9px rgb(0 0 0 / 75%);
  border-radius: 5px;
  cursor: pointer;
  background: #dfe4ea;
  user-select: none;
  width: 250px;
  height: 150px;
}

<div class="scale-container">

<div class="picture-container">
  <div class="three-image-container">
    <div class="img-frame-container">
      <img class="img-frame" src="https://images.pexels.com/photos/4876243/pexels-photo-4876243.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
    </div>
    <div class="img-frame-container">
      <img class="img-frame" src="https://images.pexels.com/photos/9646282/pexels-photo-9646282.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
    </div>
    <div class="img-frame-container">
      <img class="img-frame" src="https://images.pexels.com/photos/1386454/pexels-photo-1386454.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
    </div>
  </div>
</div>

</div>

I want all those images and their frames to have the exact same width and height as you see above, but I want them to fit into the picture-container width and height.

Now with fixed dimensions the third image exceeds the right border of the picture-container.

How can I have all three frames inside the container?

I thought that using this:

display: grid;
grid-template-columns: auto auto auto;

would do what I want, but it seems that it doesn't work if I use an image inside the frames!

Note that the frames should be in the same sizes and did not exceed the container size and I like to be able to have more or less frames so we may need some sort of max-width or something.

CodePudding user response：

You are forcing the image width to 250px. I added max-width:100% on the .img-frame and box-sizing: border-box to make sure the width of the items include the borders.

Read more on the box-sizing property

Also the gap property should be grid-gap

.picture-container {
  position: absolute;
  top: 36%; 
  width: 90%;
  left: 5%;
  border: 5px dashed red;
}

.three-image-container {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-gap: 20px; /* this was fixed */
}

.img-frame-container {

}


.img-frame {
  border: 5px solid #e8e8e8;
  box-shadow: 1px 7px 20px 9px rgb(0 0 0 / 75%);
  border-radius: 5px;
  cursor: pointer;
  background: #dfe4ea;
  user-select: none;
  width: 250px;
  height: 150px;
  /* these 2 lines were added */
  max-width: 100%; 
  box-sizing: border-box;
}

<div class="scale-container">

<div class="picture-container">
  <div class="three-image-container">
    <div class="img-frame-container">
      <img class="img-frame" src="https://images.pexels.com/photos/4876243/pexels-photo-4876243.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
    </div>
    <div class="img-frame-container">
      <img class="img-frame" src="https://images.pexels.com/photos/9646282/pexels-photo-9646282.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
    </div>
    <div class="img-frame-container">
      <img class="img-frame" src="https://images.pexels.com/photos/1386454/pexels-photo-1386454.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
    </div>
  </div>
</div>

</div>

CodePudding user response：

Changed the display from grid to flex and used relative values in width (%, value depend on container or the window size ) instead of absolute values (px, value doesn't depend on container or the window size).

Use *{box-sizing: border-box} so that border padding don't take extra space and instead content space is utilized making less overflow when size equals to screen width

See here more about box-sizing

* {
  box-sizing: border-box
}

.picture-container {
  width: 100%;
  border: 5px dashed red;
}

.three-image-container {
  display: flex;
}

.img-frame-container {
  width: 100%;
  padding:0 10px;
}

.img-frame {
  border: 5px solid #e8e8e8;
  box-shadow: 1px 7px 20px 9px rgb(0 0 0 / 75%);
  border-radius: 5px;
  cursor: pointer;
  background: #dfe4ea;
  user-select: none;
  width: 100%;
  height: 150px;
  object-fit: fill;
}

<div class="scale-container">

  <div class="picture-container">
    <div class="three-image-container">
      <div class="img-frame-container">
        <img class="img-frame" src="https://images.pexels.com/photos/4876243/pexels-photo-4876243.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
      </div>
      <div class="img-frame-container">
        <img class="img-frame" src="https://images.pexels.com/photos/9646282/pexels-photo-9646282.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
      </div>
      <div class="img-frame-container">
        <img class="img-frame" src="https://images.pexels.com/photos/1386454/pexels-photo-1386454.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
      </div>
    </div>
  </div>

</div>

CodePudding user response：

Remove the width: 90%; from .picture-container.

It's making that div take up 90% of the width of the parent (which itself fills the window) regardless of its own contents.