I’ve been using Sveltekit and SCSS to build a Masonry grid. However in my masonry grid all the items should fill in empty space, they instead get dictated by the largest image and do not fill in any empty space.

I’ve managed to get a normal CSS grid of 3 columns which looks good, but not able to get the empty space to be filled under the smaller images as the size is being dictacted by the largest image. When inspecting the CSS Grid, the next row of items start before the row instead of merging into row 1&2 to fill in empty space.

I’ve tried it out with using Flexbox too, but can’t wrap my head around how that would work. First throughs would be creating 3 seperate flexbox columns, but to me it makes more sense for CSS Grid, but i’m open to any thoughts!

In this screenshot you can see in the second and third row, the empty space that is being dictated by the first image/card
Grid Screenshot

This is the HTML for the grid & cards

<div class="gallery-list">
        {#if galleryList.length > 0}
          {#each galleryList as gallery, index}
            <div class="gallery-card">
              <div class="gallery-card__image" on:click={() => openGalleryPost(gallery)}>
                <img src={gallery.image} alt="">
              </div>
              <div class="gallery-card__content">
                <div class="gallery-card__updates">
                  <div class="body_11">#{gallery.count}</div>
                  <div class="body_11 upvotes">
                    <span class="icon">
                        <svg width="10" height="11" viewBox="0 0 10 11" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M1.5625 5.5H8.4375" stroke="#666666" stroke-width="0.75"/>
                            <path d="M5.625 2.6875L8.4375 5.5L5.625 8.3125" stroke="#666666" stroke-width="0.75"/>
                        </svg>
                    </span>
                    [{gallery.upvotes}]
                </div>
                </div>
              </div>
            </div>
          {/each}
        {/if}
      </div>

This is the SCSS used for the grid & cards

.gallery-list {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: 1fr auto;
        max-height: 620px;
        overflow-y: auto;
        padding-right: 12px;
        gap: 12px;
        grid-auto-flow: dense;

        .gallery-card {
          .gallery-card__image {
            margin-bottom: 8px;
            cursor: pointer;
            img {
              width: 100%;
              // height: 100%;
              object-fit: cover;
            }
          }
        }
}

Any ideas or helpful links/direction would be greatly appreciated!