砌体 - 无法将图像放入整个容器中

Question

尝试使用带有imageLoaded的Mansonry进行动态图像后期 - 然后图像（灰色）从左侧和右侧出现在网格中（填充空间大约为10px）。

问题在于，当我将浏览器调整得更大（或更小）时，网格在右侧有相当多的空白区域，应该靠近浏览器的右边缘，15px与左边缘类似。

参见图片示例。

HTML

<div class="bdy h-clearfix des">
    <div class="pure-u grid">
        <div class="masonry">
      <div class="grid-sizer"></div>
      <div class="item"><img src="images/1.jpg"></div>
      <div class="item"><img src="images/2.jpg"></div>
      <div class="item"><img src="images/3.jpg"></div>

    </div>
        </div>

JS

var container = document.querySelector(".masonry");
 // initialize Masonry
 var msnry = new Masonry(container, {
      columnWidth: 50,
      itemSelector: '.item',
      gutter: 5,
      transitionDuration: 0,
      isFitWidth: true,
      animate:false,
      isResizable: true,

    });

imagesLoaded( container, function() {
  msnry.layout();
});

请参阅：jsfiddle

任何方式强制图像（灰色）填写整个容器是否调整大小？

帮助表示赞赏！