始终填满全宽的砌体

Question

我正在使用 Masonry(https://masonry.desandro.com) 在我的网站上显示小预览。 我希望砌体始终 100% 适合分配的区域。 为了实现这一点，项目的宽度或装订线可以改变。 我附有一个代码笔，它展示了这个问题。

https://codepen.io/bvonr/pen/GRyvEra

蓝色区域是分配的空间需要填写。 将项目居中

.grid {
  margin: auto;
}

并不是我想要实现的目标。 每行的第一项应接触分配区域的左边界，每行的最后一项应接触分配区域的右边界。 类似于Flexbox中的space- Between。 有办法做到这一点吗？

// external js: masonry.pkgd.js

$('.grid').masonry({
  itemSelector: '.grid-item',
  columnWidth: 160,
  isFitWidth: true,
  gutter: 20
});

* { box-sizing: border-box; }

body { font-family: sans-serif; }

/* ---- grid ---- */
.frame {
  width: 90%;
  height: 100%;
  background: blue;
  border-top: solid 20px blue;
}
.grid {
  width: 100%;
  max-width: 100%;
}

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

.grid-item {
  width: 160px;
  height: 120px;
  float: left;
  background: #D26;
  margin-bottom: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://masonry.desandro.com/masonry.pkgd.js"></script>
<div class="frame">
<div class="grid">
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
</div>
</div>