我正在使用纯CSS和HTML创建一个项目网格。我在Safari中测试时遇到了一个问题。我将代码提取到CodePen中，它的工作方式与我的网格相同。
这是我用来重现问题的代码：

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
  width: 100%;
  background: WhiteSmoke;
}

.wrapper {
  display: block;
  font: 400 14px/1.3 "Helvetica", sans-serif;
  width: 100%;
  padding: 0 20px;

  @media only screen and (min-width : 768px) {
    column-count: 2;
    font-size: 17px;
    column-gap: 20px;
  }

  @media only screen and (min-width : 992px) {
    column-count: 3;
  }
}

.wrapper > * {
  @media only screen and (min-width : 768px) {
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid-column;
  }
}

.wrapper > *:last-child {
  margin-bottom: 0;
}

.card {
  box-sizing: border-box;
  display: block;
  width: 100%;
  overflow: hidden;
  background: #FFF;
  border: 1px solid red;
  margin-bottom: 20px;
  padding: 15px;
  font-family: "Helvetica", sans-serif;
}

<div class="wrapper">
  <div class="card">A</div>
  <div class="card">B</div>
  <div class="card">C</div>
  <div class="card">D</div>
  <div class="card">E</div>
</div>

下面是两个屏幕截图（均在macOS 10.13上拍摄），显示了Chrome和Safari中的不同结果。
问题是Safari似乎会将上一项的空白部分转移到第二列。有没有一种方法可以强制类似于Chrome的行为？

编辑：
我还应该包括我已经尝试将.card设置为display: inline-block;，这使得它在Chrome和Safari中看起来都很好，只要项目大小相同。
下面是另一个比较Chrome和Safari的截图，这次.card有display: inline-block;，第一个项目比其他项目大得多。