instafeed.js next() Function Breaking CSS Grid

Question

I'm using CSS Grid to display all the photos pulled in by instafeed.js. It works for the first set of photos perfectly, but when I add a "Load More..." button using the next() function it entirely breaks the grid layout.

The image shows the first red box which are the initial images that load fine then a second red box which are the images that load when using next().

<style>
    .grid-gallery {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, auto));
        grid-auto-rows: 200px;
        grid-gap: 1em;
    }

    @supports (display: grid) {
        .grid-gallery-item {
            margin: 0;
            max-width: none;
        }
    }

    .grid-gallery-item:first-child {
        grid-row: span 2;
        grid-column: span 2;
    }

    .grid-gallery-item:nth-child(3n+1):nth-child(even) {
        grid-row: span 2;
    }

    .grid-gallery-item:nth-child(3n+1):nth-child(odd) {
        grid-column: span 2;
    }

    .grid-gallery-item > img {
        width: 100%;
        /*max-*/height: 100%;
        object-fit: cover;
    }
</style>

<div class="container">
    <div id="instafeed" class="grid-gallery"></div>

    <div class="row">
        <div class="col-xs-offset-2 col-xs-8 col-md-offset-5 col-md-2">
            <button type="button" class="btn btn-md btn-primary btn-block" name="load-more" id="load-more">Load More...</button>
        </div>
    </div>

    <script type="text/javascript">
        var loadButton = document.getElementById('load-more');
        var feed = new Instafeed({
            clientId: '<client ID>',
            get: 'user',
            userId: '<user ID>',
            accessToken: '<access token>',
            template: '<a href="{{link}}" class="grid-gallery-item" target="_blank"><img src="{{image}}" /></a>',
            resolution: 'standard_resolution',
            limit: 60,
            after: function() {
                if (!this.hasNext()) {
                    loadButton.setAttribute('disabled', 'disabled');
                }
            }
        });

        loadButton.addEventListener('click', function() {
            feed.next();
        });

        feed.run();
    </script>
</div>

Answer 1

Adding grid-auto-flow: dense; to my .grid-gallery CSS made it work.