Midjounrey Gallery Masonry Grid Layout，修复跳跃的空白空间

Question

我正在尝试为中途画廊网格获取一个工作示例。 我得到的最接近的：https://codepen.io/NICK-XoX/pen/bGmNmbL.

function resizeGridItem(item){
    grid = document.getElementsByClassName("grid")[0];
    rowHeight = parseInt(window.getComputedStyle(grid).getPropertyValue('grid-auto-rows'));
    rowGap = parseInt(window.getComputedStyle(grid).getPropertyValue('grid-row-gap'));
    rowSpan = Math.ceil((item.querySelector('.content').getBoundingClientRect().height+rowGap)/(rowHeight+rowGap));
    item.style.gridRowEnd = "span " + rowSpan;
}

在调整大小时，导致顶部/底部边距疯狂地跳跃。 如果有人可以修复我现有的演示，或者链接到一个可用的演示，那就太好了。 谢谢

我已经搜索并尝试了很长时间，但我似乎无法解决问题。