Images stuck on same size and refuse to resize - html

Question

I'm using a downloaded theme from a site and it had multiple versions of homepages. I'm using one of them but in the homepage there were set sizes for the images.
I have a dynamic site so the images will be loaded automatically. I'm trying to get rid of this stuck image size but it refuses, a single image is taking all over the container.
I've deleted all the code in that section. It was a container split into 3 parts, a side bar , middle part and right part. Because I won't know the sizes of my images I left the sidebar as is and I joined the middle and right part to be together. Now whenever I add an image it takes over the whole container and the other images just load under it which lead the container to drag more.
This is what my code looks like
.container {
display: grid;
grid-template-columns: repeat(3,1fr);
grid-auto-rows: 100px 300px;
grid-gap: 10px;
}
.gallery_container .gallery_Item {
width:100%;
height: 100%;
position: relative;
}
4.gallery_container .gallery_Item .image {
width: 100%;
height: 100%;
overflow: hidden;
}
.gallery_container .gallery_Item .img {
width:100%;
height: 100%;
object-fit: cover;
}
<div class="container">
<div class="gallery_container">
<div class="gallery_Item">
<div class="imgInGallery">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTPNy2qphPH0eDMdpoyfLsPz9D-pc6ntnktcw&usqp=CAU" />
</div>
</div>
</div>
<div class="gallery_container">
<div class="gallery_Item">
<div class="imgInGallery">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRVy3Qlw07-BSIBiWkNRxZEYSHJKqQgvynzwQ&usqp=CAU" />
</div>
</div>
</div>
<div class="gallery_container">
<div class="gallery_Item">
<div class="imgInGallery">
<img src="https://pqina.nl/media/cat.jpeg" />
</div>
</div>
</div>
<div class="gallery_container">
<div class="gallery_Item">
<div class="imgInGallery">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRmK_e1W8uKhev51wmsAZVqNO0PVhOl9u2o3w&usqp=CAU" />
</div>
</div>
</div>
</div>