unable to fit three images inside their grid container - html

Question

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.

Answer 1

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>

Answer 2

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>

Answer 3

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.