CSS网格项未完全覆盖div

Question

我已使用CSS网格在图像上创建了一个网格，该图像按预期工作。但是，网格显示了在不同屏幕尺寸的部分之间的像素间隙。根据屏幕尺寸的不同，间隙似乎会出现在不同的位置。

有人知道为什么会这样吗？我敢肯定这是一个快速解决方案，但我无法终生解决。

我在下面包括了当前代码，但我还在这里https://codepen.io/anon/pen/xyqZym添加了它。

.what-we-offer-left-content {
  width: 50%;
  float: left;
  position: relative;
}

.what-we-offer-main-image {
  z-index: 5 !important;
  max-height: 735px;
}

.what-we-offer-main-image img {
  width: 100%;
  z-index: 5 !important;
}

.what-we-offer-left-grid {
  position: absolute;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 10 !important;
  overflow: hidden;
}

.what-we-offer-grid-container {
  display: -ms-grid;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-auto-rows: minmax(200px, auto);
}

.what-we-offer-left-item1,
.what-we-offer-left-item2,
.what-we-offer-left-item3,
.what-we-offer-left-item4,
.what-we-offer-left-item5,
.what-we-offer-left-item6 {
  position: relative;
  z-index: 1 !important;
}

.what-we-offer-left-item1 {
  background: -webkit-radial-gradient( bottom left, farthest-side, rgba(53, 52, 53, 0.4), transparent), -webkit-radial-gradient(bottom right, farthest-corner, rgba(121, 122, 118, 0.4), transparent 400px);
  background: -o-radial-gradient( bottom left, farthest-side, rgba(53, 52, 53, 0.4), transparent), -o-radial-gradient(bottom right, farthest-corner, rgba(121, 122, 118, 0.4), transparent 400px);
  background: radial-gradient( farthest-side at bottom left, rgba(53, 52, 53, 0.4), transparent), radial-gradient(farthest-corner at bottom right, rgba(121, 122, 118, 0.4), transparent 400px); //box-shadow: 0 10px 10px -5px rgba(0, 0, 0, 0.2);
}

.what-we-offer-left-item2 {
  background: -webkit-radial-gradient( top left, farthest-side, rgba(53, 52, 53, 0.3), transparent), -webkit-radial-gradient( top right, farthest-corner, rgba(253, 253, 253, 0.3), transparent 300px);
  background: -o-radial-gradient( top left, farthest-side, rgba(53, 52, 53, 0.3), transparent), -o-radial-gradient( top right, farthest-corner, rgba(253, 253, 253, 0.3), transparent 300px);
  background: radial-gradient( farthest-side at top left, rgba(53, 52, 53, 0.3), transparent), radial-gradient( farthest-corner at top right, rgba(253, 253, 253, 0.3), transparent 300px);
}

.what-we-offer-left-item3 {
  background: lightblue;
}

.what-we-offer-left-item4 {
  background: lightpink;
}

.what-we-offer-left-item5 {
  background: -webkit-radial-gradient( top left, farthest-side, rgba(53, 52, 53, 0.2), transparent), -webkit-radial-gradient( top right, farthest-corner, rgba(184, 185, 181, 0.2), transparent 300px);
  background: -o-radial-gradient( top left, farthest-side, rgba(53, 52, 53, 0.2), transparent), -o-radial-gradient( top right, farthest-corner, rgba(184, 185, 181, 0.2), transparent 300px);
  background: radial-gradient( farthest-side at top left, rgba(53, 52, 53, 0.2), transparent), radial-gradient( farthest-corner at top right, rgba(184, 185, 181, 0.2), transparent 300px);
}

.what-we-offer-left-item6 {
  background: -webkit-radial-gradient( top left, farthest-side, rgba(218, 218, 216, 0.2), transparent), -webkit-radial-gradient( top right, farthest-corner, rgba(253, 253, 253, 0.2), transparent 300px);
  background: -o-radial-gradient( top left, farthest-side, rgba(218, 218, 216, 0.2), transparent), -o-radial-gradient( top right, farthest-corner, rgba(253, 253, 253, 0.2), transparent 300px);
  background: radial-gradient( farthest-side at top left, rgba(218, 218, 216, 0.2), transparent), radial-gradient( farthest-corner at top right, rgba(253, 253, 253, 0.2), transparent 300px);
}

.what-we-offer-left-item1::before,
.what-we-offer-left-item2::before,
.what-we-offer-left-item3::before,
.what-we-offer-left-item4::before,
.what-we-offer-left-item5::before,
.what-we-offer-left-item6::before {
  content: '';
  display: block;
  padding-top: 100%;
}

.what-we-offer-left-item1 .what-we-offer-content,
.what-we-offer-left-item2 .what-we-offer-content,
.what-we-offer-left-item3 .what-we-offer-content,
.what-we-offer-left-item4 .what-we-offer-content,
.what-we-offer-left-item5 .what-we-offer-content,
.what-we-offer-left-item6 .what-we-offer-content {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

<div class="what-we-offer-left-content">
  <div class="what-we-offer-left-grid">
    <div class="what-we-offer-content">
      <div class="what-we-offer-grid-container">
        <div class="what-we-offer-left-item1"></div>
        <div class="what-we-offer-left-item2"></div>
        <div class="what-we-offer-left-item3"></div>
        <div class="what-we-offer-left-item4"></div>
        <div class="what-we-offer-left-item5"></div>
        <div class="what-we-offer-left-item6"></div>
      </div>
    </div>
  </div>
  <div class="what-we-offer-main-image"><img src="https://images.unsplash.com/photo-1536147116438-62679a5e01f2?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=e8edad632cfc0900a6af587857693465&auto=format&fit=crop&w=934&q=80"></div>
</div>