Masonry.js列中的死空间;我怎样才能正确分层div？

Question

我正在学习如何使用砌体，从我所知道的，我正确地使用它 - 显然我并不是因为我无法做到我想做的事。基本上，我的列中有死空间。我想在每个生成的div之间保持相等的边距（很像Pinterest）。我有一般的布局，但我不太确定如何消除我的死区错误...

这是codepen - http://codepen.io/jacob_johnson/pen/PPxYmO

以下是一些相关代码：

一般HTML：

<div id="grid">
  <div class="grid-item">
    <img src='catpicture.jpg' />
    <div class='post-title'>Grumpy cat looks unhappy</div>
  </div>
  . . . More `grid-item`s go here . . .
</div>

CSS：

body {
    background-color: #eee;
}

.grid {
    max-width: 1200px;
}

.grid-item {
  width: 320px;
  float: left;
  background: white;
  border: 1px solid #aaa;
  border-radius: 4px;
  margin: 10px;
  box-shadow: 0 0 5px #aaa;
}

.grid-item img {
    width: 100%;
    border-radius: 2px 2px 0 0;
    margin: 0;
    padding: 0;
    border-bottom: 1px solid #aaa;
}

JavaScript的：

jQuery(document).ready(function($){
  $("#grid").masonry({
    columnWidth: 320,
    itemSelector: ".grid-item"
  });
});

.post-title {
    margin: 5px;
}

除了官方网站之外，我还使用了一个指南：http://zoerooney.com/blog/tutorials/qa-the-pinterest-style-grid-a-k-a-masonry/