砌体物品位置变化

Question

这是我的砌石代码。 工作正常，但问题是我的项目4没有设置最后。 我该怎么做才能解决这个问题？ 提前谢谢。

// external js: masonry.pkgd.js

$(document).ready( function() {

  $('.grid').masonry({
    itemSelector: '.grid-item',
    columnWidth: '.grid-sizer',
    percentPosition: true,
    gutter: 5,
  });
  
});

* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

body { font-family: sans-serif; }

/* ---- grid ---- */

.grid {
  background: #EEE;
  max-width: 1200px;
}

/* clearfix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

/* ---- grid-item ---- */

.grid-sizer,
.grid-item {
  width: calc(15.71% - 5px);
  /*width: 15.71%;*/
}

.grid-item {
  height: 120px;
  float: left;
  background: #D26;
  border: 2px solid #333;
  border-color: hsla(0, 0%, 0%, 0.5);
  border-radius: 5px;
}
/*.grid-item--width2 { width:  20.3% }
.grid-item--width3 { width:  31.42%; }*/

.grid-item--width2 { width:  calc(20.3% - 5px) }
.grid-item--width3 { width:  calc(31.42% - 10px); }

.grid-item--height2 { height: 200px; }
.grid-item--height3 { height: 260px; }
.grid-item--height4 { height: 360px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://masonry.desandro.com/masonry.pkgd.js"></script>
<div class="grid">
  <div class="grid-sizer"></div>
  <div class="grid-item grid-item--width3 grid-item--height2">1</div>
  <div class="grid-item grid-item--width3">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item grid-item--width2 grid-item--height2">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item grid-item--width3">6</div>
</div>