Masonry that always fills full width

Question

I am using Masonry(https://masonry.desandro.com) to display little previews on my website. I want the masonry to always fit 100% of the allocated area. To accomplish this, either the width of the items or the gutter can vary. I have a codepen attached that showcases the problem.

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

The blue area is the allocated space that needs to be filled. Centering the items with

.grid {
  margin: auto;
}

is not what I am trying to accomplish. The first item of each row should touch the left border of the allocated area, and the last item of each row should touch the right border of the allocated area. Similar to space-between in flexbox. Is there a way to accomplish this?

// 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>