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?