Odtnhj

I'm trying to create a very basic grid layout with Masonry.js here. Basically I want to dynamically add a new grid item to my grid. This works normally except for one weird issue I see no matter how I try and implement this. When I add the new element, the item that was first in the list and all the way to the left moves to the far right side of the grid, and a space appears between the first and second items.

Before appending anything my grid looks like this

With this structure for 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;

After adding the item the grid looks like this...

As expected the new grid item fills in the last spot, but now I also have this giant gap at the top to deal with. The space that's inserted at the top appears to be the same height as one row of grid-items (probably not a coincidence).

I could just use css grids to achieve the same appearance, but I like that Masonry grid-items are animated (which is something I really don't want to try and reproduce).

I've looked around in Masonry's documentation for a solution or possible explanation but haven't found a smoking pistol.

Any ideas?