Jquery 单天沟双柱砌体

我创建了以下代码笔：

这个想法是有一个两柱砌体的盒子，应该有20像素的间距在他们之间。我已将

框大小设置为
边框框
，以忽略每个项目的边框和内部填充

然而，第二列正在第一列下面崩溃。。。大概是因为
50%
和两个框（左侧和右侧）上的20px添加到了它

有没有办法解决这个问题

我已经考虑过可能的做法：

'columnWidth'：$（'.marsey'）.width（）/2
并在CSS中将
.item
设置为
100%
，但这似乎也不起作用。。。也许是因为檐槽也附加到了右侧的列框

JS:

CSS:

HTML:

如果您将以下内容添加到
$（文档）。准备好了吗

  $(window).on("resize load", function() {
    var desired_width = $(".masonry").width()/2 - 10
    $('.masonry .item').css("width", desired_width)
  })

它应该给出您想要的结果。
如果您将以下内容添加到
$（文档）中。准备好了吗

  $(window).on("resize load", function() {
    var desired_width = $(".masonry").width()/2 - 10
    $('.masonry .item').css("width", desired_width)
  })

它应该会给出你想要的结果。
我已经创建了一个两柱砌体的解决方案，排水沟为30px。它仍然会将其追加到两列，但在网格元素上添加一个
溢出：隐藏
，会使不需要的右侧边沟变得模糊

Codepen here:
我创建了一个两柱砌体的解决方案，排水沟为30px。它仍然会将其追加到两列，但在网格元素上添加一个
溢出：隐藏
，会使不需要的右侧边沟变得模糊

这里的代码笔：
宽度：计算（50%-10px）
可以工作，但并非所有浏览器都支持：（
width:calc（50%-10px）；
可以工作，但并非所有浏览器都支持：(
<div class="masonry">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

  $(window).on("resize load", function() {
    var desired_width = $(".masonry").width()/2 - 10
    $('.masonry .item').css("width", desired_width)
  })