如何纠正两个不同大小的列的masonry.js布局

Question

我无法让我的jQuery Masonry布局工作。当我不使用砖石时，图像的大小和位置都是正确的，但是存在您所期望的间隙。

砌体应该填补这些空白。我想我需要调整CSS。

第一张图片需要741px宽。因为我设置了.grid-item {width:50%}，所以它减小了第一张图像的大小。

如何解决此问题，以便所有图像保留原始尺寸，但在两列中彼此相邻？

下面的第一张图片是砖石活动的。第二个是砌体不活动。

＆＃13;

＆＃13;

.grid {
    max-width: 71em;
    margin: 30px auto;
    padding: 0;
}

.grid-item {
    display: block;
    float: left;
    padding: 7px;
    width:50%;
}

＆＃13;

<div class="grid-item" id="grid-item-1"><a href="http://drbl.in/fWMM"><img src="http://grdesigns.co.uk/wp-content/uploads/2017/09/box-1-741x500.png"></a></div>
	<div class="grid-item" id="grid-item-2"><a href="http://drbl.in/fWPV"><img src="http://grdesigns.co.uk/wp-content/uploads/2017/09/box-2.png"></a></div>
	<div class="grid-item" id="grid-item-3"><a href="http://drbl.in/fWMT"><img src="http://grdesigns.co.uk/wp-content/uploads/2017/09/box-3.png"></a></div>
	<div class="grid-item" id="grid-item-4"><a href="http://drbl.in/fQdt"><img src="http://grdesigns.co.uk/wp-content/uploads/2017/09/box-4.png"></a></div>
        <div class="grid-item" id="grid-item-5"><a href="http://drbl.in/fQdt"><img src="http://grdesigns.co.uk/wp-content/uploads/2017/09/box-4.png"></a></div>
        </div>

＆＃13;

＆＃13;

＆＃13;

这是我的jQuery：

<script type="text/javascript">

  jQuery(window).load(function() {
  var container = document.querySelector('.grid');
  var msnry = new Masonry( container, {
    itemSelector: '.grid-item',
    columnWidth: '.grid-item',
    horizontalOrder: true,
  });  

    });

</script>