need help understanding css grid with variable image sizes - html

Question

absolute css newbie here. all the tutorials and examples i've been finding over the past three days perfectly explain how to set up an image gallery using grid with images of a similar size, but I can't figure out how to set one up with images of variable sizes without having horrible gaps underneath smaller images, like here:
horrible gaps
I've tried using everything under object-fit, and nothing works. i know its because i'm grossly misunderstanding something. i'd like for my image gallery to look like: this mosaic image gallery and to understand how to accomplish this. i can easily do something similar it when it's just a bunch of empty boxes, but for some reason when images get thrown into the mix, i'm not understanding it.
here's my html:
<div class="gallery">
<img src="images/img-1.jpg" alt="nature">
<img src="images/img-2.jpg" alt="nature">
<img src="images/img-3.jpg" alt="nature">
<img src="images/img-4.jpg" alt="nature">
<img src="images/img-5.jpg" alt="nature">
</div>
and css:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.gallery{
display: grid;
grid-template-areas:
'img-1 img-2 img-3'
'img-4 img-5 .';
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
grid-gap: 1rem;
}
img{
display: block;
overflow: hidden;
width: 100%;
}
img-1{
grid-area: img-1;
}
img-2{
grid-area: img-2;
}
img-3{
grid-area: img-3;
}
img-4{
grid-area: img-4;
}
img-5{
grid-area: img-5;
}
i've tried looking at similar answers which want me to set my img{ width: auto; height: 100%}, and when i do, everything disappears from the screen, giving me a blank page.
any and all help is greatly appreciated!