javascript - Masonry: Creating a grid on AJAX callback

So I'm pretty familiar with Masonry I'd say, but I haven't had to do this before.

I'm aware of the "appended" method to add items to the grid after page load through ajax, but that's not exactly what I'm trying to do.

My grid structure doesn't exist at all until it's called via ajax.

For example (pseudocode):

1. Page Loads


2. User Clicks a Link


3. AJAX call, HTML string is returned and added to the dom via jQuery.


4. Need to instantiate the masonry grid based on this HTML.

Basically the HTML that is returned via AJAX looks something like this:

So as you can see I'm not adding to an existing grid or masonry, I need to create a new one on successful return of the AJAX.

My JS looks something like this:

$('.get-grid').click(function(e){

    var id = $(this).data('id');
    $.post(ajaxurl, { action: 'get_grid', id: id  }, function(response) {

        // Append this html to the area of the site where I have the grids. 
        $('.all-the-grids').append(response);

        // Here is where i need to actually turn this HTML that I just added into a masonry object and lay it out.
        var $container = $('.grid-' + id);
        msnry = new Masonry( $container[0], {
            columnWidth: 188,

            itemSelector: '.item',
            gutter: 10
        }); 
        msnry.on('layoutComplete', function(){
            // never making it in here.
        }); 
    });
});

Any idea how to do this?

EDIT

It appears my grid is getting laid out correctly, no errors, but it's never reaching the layoutComplete callback here.