Masonry style layout with CSS & JS

Question

I'm trying to build a simple two column layout in the masonry style. With items/images that have alternate and dynamic heights and that fit organically into the grid. Best well know example being Pinterest. I want to avoid any libraries and end up with something that is fairly lightweight and quick. The reference I'm using is this: https://w3bits.com/labs/css-grid-masonry-js/

...Which is build with CSS grid and makes use of dynamic grid-row-end values to achieve the result. Article here: https://w3bits.com/css-grid-masonry/

I'm using Vue/Nuxt and I've gotten fairly close but I'm ending up with gaps in places that are too big and not uniform. CSS Grid is still a bit of a mystery so any help would be appreciated!

This is what I have:

<template>
 <div class="grid-container">
        <div
          class="item"
          v-for="(project, index) in data"
          :key="index"
          :style="[resizeMasonryItem(project.image.dimensions.height)]"
        >
          <img
            :width="project.image.dimensions.width"
            :height="project.image.dimensions.height"
            :src="project.image.url"
          />
</div>
</div>

<script setup>
function resizeMasonryItem(itemHeight) {
  let rowGap = 20;
  var rowSpan = Math.ceil((itemHeight + rowGap) / (rowGap * 10));

  return `grid-row-end: span ${rowSpan}`;
}
</script>


</template>
<style>
.grid-container {
  display: grid;
  grid-template-columns: 50% 50%;
  grid-auto-rows: minmax(0, auto);
}
</style>