CSS Grid boşluklarını nasıl silebiliriz

Merhaba iki parça kod vereceğim ve sonuç ile sorunu anlatacağım.

İlk önce HTML kodlarım:

  <section class="grid-container">
            <div>
                <img src="https://picsum.photos/200">
            </div>
            <div>
                <img src="https://picsum.photos/200/300">      
            </div>
            <div>
                <img src="https://picsum.photos/200">
            </div>
            <div>
                <img src="https://picsum.photos/200/300">      
            </div>
            <div>
                <img src="https://picsum.photos/200">
            </div>
            <div>
                <img src="https://picsum.photos/200/300">      
            </div>
            <div>
                <img src="https://picsum.photos/200">
            </div>
            <div>
                <img src="https://picsum.photos/200/300">      
            </div>
            
                 
        </section>

Ve CSS kodlarım:

.grid-container{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto;
}

Bu kodların sonucunda ortaya çıkan sonuç:



Yukarıda boşluk yazan yere, 2. satırdaki görsellerin yerleşmesini istiyorum. 1. satırın 2. resmi yüzünden böyle oluyor biliyorum fakat 2. satırdaki resimlerin yukarıya çıkmasını istiyorum. Hatta resimler eklendikçe boşlukların dolmasını istiyorum. Yani alttaki resimlerin, bir üstlerindeki boşluklara girmesini nasıl sağlayabilirim?

.grid-container img {
width: 100%;
height: 100%;
object-fit: cover;
}

şeklinde denedin mi ?

Hocam denedim ama böyle yapınca, her resim aynı yüksekliğe ulaşıyor. Ben 50% yükseliğe sahip resmin 100% boyuta çıkmasını istemiyorum ki.