Usually isotope allows appending new items and then just re-layout the masonry again:

Somewhere in your JS file you should put the elements you want to append into a variable, e.g. new_elements

jQuery('.grid').append(new_elements)
    .isotope('appended', new_elements)
    .imagesLoaded( function() {
        jQuery('.grid').istotope('layout');
    });

Source: http://isotope.metafizzy.co/methods.html

The solution

Thanks to @vajrasar for the final touches.

When you echo the Grid-Page Loop, add the following:

function loop_p_arch_infinite_scroll_render() {
    $paged = get_query_var( 'paged', 1 );
    ?>
    <div id="page-<?=$paged?>">
        <?php while( have_posts() ) {
            the_post();
            get_template_part( 'content', 'product' );
        }
        ?>
    </div>
    <script id="script-page-<?=$paged?>">
        jQuery('document').ready(function($) {
            var new_elements = $('#page-<?=$paged?>').children('.grid-item');
            $('.grid')
                .append(new_elements)
                .isotope('appended', new_elements)
                .imagesLoaded( function() {
                    $('.grid').isotope('layout');
                });
            $('#page-<?=$paged?>, #script-page-<?=$paged?>').remove();
        });
    </script>
    <?php
}