instafeed.js next（）函数破坏CSS网格

我正在使用CSS网格显示instafeed.js拉入的所有照片。它对第一组照片非常有效，但当我使用

next（）

函数添加“加载更多…”按钮时，它完全破坏了网格布局

该图像显示第一个红色框，它是加载的初始图像，然后显示第二个红色框，它是使用

next（）

时加载的图像

.grid画廊{
显示：网格；
网格模板列：重复（自动填充，最小值（200px，自动））；
网格自动行：200px；
网格间距：1米；
}
@支持（显示：网格）{
.网格库项目{
保证金：0；
最大宽度：无；
}
}
.grid gallery项：第一个子项{
网格行：跨度2；
格构柱：跨度2；
}
.grid gallery项：第n个子项（3n+1）：第n个子项（偶数）{
网格行：跨度2；
}
.grid gallery项：第n个子项（3n+1）：第n个子项（奇数）{
格构柱：跨度2；
}
.grid gallery项目>img{
宽度：100%；
/*最大-*/高度：100%；
对象匹配：覆盖；
}
加载更多。。。
var loadButton=document.getElementById（'load-more'）；
var feed=新Instafeed({
客户端ID:“”，
获取：“用户”，
用户标识：“”，
accessToken:“”，
决议：“标准决议”，
限额：60，
之后：函数（）{
如果（！this.hasNext（））{
loadButton.setAttribute（'disabled'，'disabled'）；
}
}
});
loadButton.addEventListener（'单击'，函数（））{
feed.next（）；
});
feed.run（）；

添加

网格自动流：稠密到我的
。网格库
CSS使其工作

<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>