堆叠的百分比高度对于一个大的百分比呈现不同

Question

编辑：JSFiddle：https://jsfiddle.net/j6dmrnt3/

我在这个问题中使用Packery.js作为布局，但问题与一般CSS有关。请随便告诉我。

我正在使用CSS padding-bottom：x％来创建响应方块的网格。但我发现，两个小方块在两个小方块之间呈现出略微不同的高度。这导致方块在略微不同的地方清除。显然这是因为Chrome无法渲染中间像素，但我想知道是否有解决方法？广场周围的填充也不一致，具体取决于浏览器的大小。

在屏幕截图中，您可以看到大方块比其他方块略高，导致下一个方块显示在旁边，而不是下方。

以下是相关代码（我在这里使用了calc，但这仅用于说明目的）：

.item{
    height: 0;
    width: calc(100%/7); // 7 Columns
    padding-bottom: calc(100%/7); // 7 Columns


    .inner{
        background: $white;
        position: absolute;
        top: 2px;
        right: 2px;
        bottom: 2px;
        left: 2px;
        padding: 15px;
    }

    &.large-square{
        width: calc(100%/3.5);
        padding-bottom: calc(100%/3.5);

    }

    &.long-horizontal{
        width: calc(100%/3.5);

    }
    &.long-vertical{
        padding-bottom: calc(100%/3.5);

    }
}