javascript - 百分比布局上的砌体中断

Question

在Masonry 的文档中，它说要使用基于百分比的宽度，您应该使用 CSS 类来定义它，即

.col-width {
  width: 16.71827%;
}

var msnry = new Masonry( container, {
    itemSelector: '.tile',
    columnWidth: '.col-width',
});

但是，每次所有块堆叠在一起时，尝试这样做似乎都会破坏我的布局。这是一个 Codepen 演示。

关于这里出了什么问题的任何想法？