我绝不是一个CSSMaven，但这里我尝试这样做：

.item1 { grid-area: one; }
.item2 { grid-area: two; }
.item3 { grid-area: three; }
.item4 { grid-area: four; }
.item5 { grid-area: five; }
.space1 { grid-area: spaceleft; }
.space2 { grid-area: spaceright; }

.grid-container {
  display: grid;
  grid-template-areas:
    'one one two two three three'
    'spaceleft four four five five spaceright';
  gap: 10px;
  padding: 10px;
}

.grid > div {
  text-align: center;
}

<div class="grid">
  <div class="item1"><img src="https://placehold.jp/400x400.png"></div>  
  <div class="item2"><img src="https://placehold.jp/400x400.png"></div>
  <div class="item3"><img src="https://placehold.jp/400x400.png"></div>
  <div class="space1"></div>
  <div class="item4"><img src="https://placehold.jp/400x400.png"></div>
  <div class="item5"><img src="https://placehold.jp/400x400.png"></div>
  <div class="space2"></div>
</div>

看起来像this

可能有上千种不同的方法来做到这一点，但这是一种方法。我希望你也能得到一些其他的回应。