砌体在百分比布局上打破

Question

在documentation for Masonry中，它表示要使用基于百分比的宽度，你应该使用CSS类来定义它，即

.col-width {
  width: 16.71827%;
}

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

但是，尝试这样做似乎每次将所有块堆叠在一起时都会破坏我的布局。 Here's a Codepen demo

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