Gallery not displaying properly on first load?

[AnthonyIsBlacking]

Hello guys!

I was setting up Masonry through Vue.js and for some reason, I've noticed the first time a browser loads the page, the gallery gets basically overlapped by other elements and this gets totally fixed whenever the page is reloaded or if the user simply clicks one of the category buttons, which forces the gallery to straighten, and happens again if the user hard refreshes the page.

This can be found at https://www.portugalhomes.com/construction , to the end of the page,

Here is an example of the issue: https://i.postimg.cc/PqHhMmxp/masonry.png

Can this be due to implementing the imagesLoaded module? The thing is I'm relatively new to this and I don't know how to integrate it with my use of Vue, if that's the case,

The JS code is present in the HTML right below the masonry area, I tried to insert it in a codepen but it didn't reproduce the issue, either way here's the link: https://codepen.io/DenverAnthony/pen/LYjPmpy

What is provoking this issue and what can I do to avoid it? I know it's something simple, I just haven't figured it out yet =]

Thank you very much

[JKearnsl]

Use this approach to initialize Masonry

<script> Promise.all(Array.from(document.images).filter(img => !img.complete).map(img => new Promise(resolve => { img.onload = img.onerror = resolve; }))).then(() => { var elem = document.querySelector('.grid'); var msnry = new Masonry( elem, { // options itemSelector: '.grid-item', gutter: 10, }); }); </script>