incorrectly display items when output their trought templates or loop

Hello. I have problem display items when i am trying output their trought loop or template (handlebars) Doesn't work:

HTML:

<div id="portfolio_item">
    <div class="grid">
          <div class="grid-sizer"></div>
          </div>
</div>

var project = [
    {
        link: "./img/WiFire/main.html",
        img: "/img/wifire/glavnaya_v1.jpg"  
    },
    {
        link: "./WiFire/main.html",
        img: "/img/wifire/glavnaya_v1.jpg"  
    },
]

var html = project.map(function(item){
    return(
        `<div class="grid-item">
            <img src="${item.img}" alt="">
          </div>`
        )
})

$(".grid-sizer").after(html.join("\\/n"))

$('.grid').masonry({
  itemSelector: '.grid-item',
  columnWidth: '.grid-sizer',
  percentPosition: true
});

You can link http://front-endmaster.ru/ and see how it's display

But it works when i write html by hand.

desandro / masonry

incorrectly display items when output their trought templates or loop #1049