Multiple masonry containers on one page

[quiple]

I'm using Masonry with using tabs. But If I switch tab, then I can see another Masonry containers' height working abnormally. (These containers will be switching between "display: none;" and "display: block;")

The text case: https://quiple.github.io/byhoody/

This is the Masonry part of the <script>.

var $grid = $('#Illus,#Compo,#Video').imagesLoaded(function() {
  $grid.masonry({
    itemSelector: '.grid-item',
    columnWidth: '.grid-item',
    gutter: 20
  });
});

(I'm using ImagesLoaded too)

Sorry for my bad English. What solution can I try?

[quiple]

I solved this myself... Just insert init Masonry in tabbing script.

[chukura]

I know this has already been closed, but the following helped me in the case where I needed to have multiple masonry containers on one page, and initialise them all at once:

$('.grid').each(function (index) {
    $(this).masonry({
      itemSelector: '.grid-item',
      columnWidth: 200,
    });
  });