我插入新的网格项目后，砖石网格变得更高

Question

我正在尝试使用Masonry.js创建一个非常基本的网格布局。基本上，我想将新的网格项动态添加到网格中。除了我看到的一个奇怪的问题，无论我如何尝试和实现，这都可以正常工作。当我添加新元素时，列表中第一项并一直向左移动的项将移至网格的最右侧，并且第一项和第二项之间会出现一个空格。

在添加任何内容之前，我的网格看起来像这样

使用html的这种结构

        <div id="session-holder">
                <div class="grid">
                    <div id="add-session" class="grid-item"><img src="Icons/add-orange.png"></div>
                    <div class="grid-item"></div>
                    <div class="grid-item"></div>
                    <div class="grid-item"></div>
                    <div class="grid-item"></div>
        </div>

JS

var element = document.querySelector(".grid")
var layout = new Masonry(element, {
    itemSelector : ".grid-item",
    fitWidth: true,
})

CSS

#session-holder{
    height: fit-content;
}
.grid{
    width: 540px;
}
#add-session{
    border-width: 3px;
    box-sizing: border-box;
    border-style: solid;
    border-color: #ff7c4d;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: transparent;
    transition: opacity 1s linear;
}
#add-session:hover{
    opacity: .7;
}
#add-session:hover > img{
    transform: rotateZ(90deg);
}
#add-session > img{
    transition: transform .2s linear;
    height: 50px;
    width: 50px;
}
#next-session{
    background-color: transparent;
    border-color: orangered;
    border-width: 2px;
    border-style: solid;
    box-sizing: border-box;
}
.grid-item{
    background-color: #333333;
    border-radius: 2px;
    height: 130px;
    width: 160px;
    margin: 5px;
}

添加项目后，网格看起来像这样……

不出所料，新的网格项目将填充到最后一个位置，但是现在我也需要解决这个巨大的空白。顶部插入的空间似乎与一排网格项目的高度相同（可能不是巧合）。

我可以只使用CSS网格来获得相同的外观，但是我喜欢Masonry网格项目具有动画效果（这是我真的不想尝试复制的东西）。

我已经在Masonry的文档中四处寻找解决方案或可能的解释，但没有找到吸烟手枪。

有什么想法吗？