MeteorJS Packery layout has overlapping items when redrawn

Question

I am new to coding and new to Meteor so have made my fair share of blunders along the way - so far I've managed to fix them but this one's got me well and truly stumped.

I'm using packery to layout some divs containing information on projects that contain a number of divs with information on tasks within each project. So far so good, the layout works nicely when the template first loads.

When I add a new task to one of the projects, which gets added to the Tasks collection, the layout redraws but that project, which is now 1 row longer, overlaps the next project down the layout.

I've re-used the answer from here (MeteorJS and Packery layout doesn't re-render when collection is updated) but this doesn't work for the redraw.

projects.html:

<template name="projects">
  <div class='grid' id='allProjects'>
    {{#each project}}
      <div class='grid-item' id='project'>
        <div project content goes in here>
        </div>
      {{#each task}}
        <div id='task'>
          <div task content goes in here>
          </div>
        </div>
      {{/each}}
      </div>
    {{/each}}
  </div>
</template>

projects.js:

Template.projects.onRendered(function(){
  this.find('.grid')._uihooks = {
    insertElement: function(node, next){
      triggerPackeryLayout();
      $('.grid').append(node);
      $('.grid').packery('appended', node);
    }
  };
});

function triggerPackeryLayout(){
  var $grid = $('.grid');
  $grid.packery({
    itemSelector: '.grid-item'
  });
}

I think it's something to do with timing of when the layout is redrawn because when I add another task to the project, which uses a modal window, the layout corrects itself as the modal opens.

Do I need to delay the layout to allow the new Tasks item to load from the collection?