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 yerlere, 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?

Bakınız : https://codepen.io/barisdogansutcu/pen/NWdoPwy - https://barisdogansutcu.com/css-grid...nry-kullanimi/

https://codepen.io/tag/masonry

şuradan örnek kodlara benzer kodlar ile revize edebilirsiniz, anahtar kelime "masonry gallery".

<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>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js"></script>
<script>
    $(document).ready(function () {

        function initializeMasonry() {
            $(".grid-container").masonry({
                itemSelector: "div",
                columnWidth: "div",
                gutter: 0, // Adjust the gutter as needed
            });
        }


        initializeMasonry();


        $(".grid-container img").on("load", function () {
            initializeMasonry();
        });
    });
</script>

şuda sizinkine uyacak örnek bir çalışma.