css grid images responsive - css

Question

I'm trying to make small grid of images. On desktops I want 3 images per column and on mobiles 2 images per column. I have no problem doing that. Problems start when I shrink the size of the page to the mobile size. The images are in the proper order but they do not shrink, they keep their original size and the one on the right goes out of the grid (you can't see half of it). I tried max-width:100%, width:100% etc. Did not work.
.sponsors1 {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
#media(max-width:768px) {
.sponsors1 {
grid-template-columns: 1fr 1fr;
justify-self: center;
grid-gap: 8px;
margin-top: 10px;
margin-bottom: 20px;
align-items: center;
overflow:
}
.img1 {
justify-self: center;
}
.img2 {
justify-self: center;
}
.img3 {
justify-self: center;
}
}
<div class="sponsors1">
<img src="images/#.png" alt="">
<img src="images/#.jpg" alt="">
<img src="images/#.png" alt="">
</div>

Answer 1

You should set your image containers' justify-self properties to stretch and then set the image's (NOT their containers') widths to 100%.
.sponsors1{
display:grid;
grid-template-columns: 1fr 1fr 1fr;
}
#media(max-width:768px){
.sponsors1{
grid-template-columns: 1fr 1fr;
justify-self:center;
grid-gap: 8px;
margin-top: 10px;
margin-bottom: 20px;
align-items:center;
overflow:
}
.img1{
justify-self: stretch;
}
.img2{
justify-self: stretch;
}
.img3{
justify-self: stretch;
}
}
img {
width: 100%
}
<div class="sponsors1">
<img src="https://upload.wikimedia.org/wikipedia/commons/8/84/Example.svg" alt="">
<img src="https://upload.wikimedia.org/wikipedia/commons/8/84/Example.svg" alt="">
<img src="https://upload.wikimedia.org/wikipedia/commons/8/84/Example.svg" alt="">
</div>