响应式3列网格布局留下空白

Question

我正在建立一个带有缩略图网格的响应式投资组合网站。它取决于浏览器宽度，从单列网格到三列网格。

问题仅出现在三列网格中。当我调整浏览器大小时，有时网格会跳过两个缩略图并留下空白区域。缩略图在网格中被进一步推动，如下所示：

现在，这有时只会发生。当我调整浏览器大小时，我可以看到它从正常网格切换到错误网格并返回（至少在Chrome和Safari中，Firefox在调整大小时总是显示错误）。

这是我的缩略图div的html / css。

HTML

<div class="thumbnails">
    <div>*image*</div>
    <div>*image*</div>
    <div>*image*</div>
<div>

CSS

.thumbnails div{
    width: 33.33333%;
}

我的所有元素都有盒子大小：border-box;在他们。我希望我没有遗漏任何其他相关信息。我之前没有遇到过这个特殊的问题。也许我忽略了一些明显的东西，但任何帮助都会受到赞赏！

Answer 1

据我所知，这可以解决它

.thumbnails div:nth-child(3n + 4){
   clear: left;
}

如果其中一个div与其他div的高度不同，则在下一行的第一行中需要clear: left;。