Css 堆叠百分比高度渲染不同于一个大百分比

编辑：JSFiddle此处：

我在这个问题中使用packy.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);

    }
}

---

请设置一个JSFIDLE，以便我们可以自己尝试。仅基于CSS，我想说的是，问题确实是边距的高度以小数结尾，并向上或向下取整。在我的帖子中添加了JSFIDLE-调整浏览器的大小，你应该明白我的意思。