我如何才能使该网格仅显示两行和无限的列？

Question

这是用户发布图片的地方，它将显示出来，但有点像Zillow.com上的滑块样式。 我得到了这两个显示最多9个div，然后从那里开始，它将创建更多行。

.grid-container {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-auto-rows: 200px;
    grid-gap: 10px;
}
.grid-container>div {
    text-align: center;
    font-size: 30px;
}

.item1 {
    grid-row: 1 / 3;
}

.detailed-gallery-outer {
    overflow: hidden;
    width: 100%;
}

.detailed-gallery-inner {
    float: left;
    position: relative;
}

.detailed-gallery-tmb {
    float: left;
    margin: 0 10px 0 0;

}

.detailed-gallery {
    display: flex;
    justify-content: space-between;
    padding: 0;
    position: relative;
    width: 1140px;
    margin: 0 auto;
}

<div class="detailed-gallery">
  <div class="arrow-left">
      <div class="arrow-left-small">
      </div>
  </div>
  <div class="detailed-gallery-outer">
      <div class="detailed-gallery-inner">
          <div class="grid-container">
              <div class="item1"><img src="images/office1.jpg" alt="office1" width="250" height="340"/></div>
              <div class="item2"><img src="images/office2.jpg" alt="office2" width="250" height="165"/></div>
              <div class="item3"><img src="images/office3.jpg" alt="office3" width="250" height="165"/></div>  
              <div class="item4"><img src="images/office4.jpg" alt="office4" width="250" height="165"/></div>
              <div class="item5"><img src="images/office5.jpg" alt="office5" width="250" height="165"/></div>
              <div class="item6"><img src="images/office6.jpg" alt="office6" width="250" height="165"/></div>
              <div class="item7"><img src="images/office7.jpg" alt="office7" width="250" height="165"/></div>
              <div class="item8"><img src="images/office3.jpg" alt="office8" width="250" height="165"/></div>
              <div class="item9"><img src="images/office4.jpg" alt="office9" width="250" height="165"/></div>
              <div class="item10"><img src="images/office6.jpg" alt="office8" width="250" height="165"/></div>
              <div class="item11"><img src="images/office5.jpg" alt="office9" width="250" height="165"/></div>
          </div>
      </div>
  </div>
  <div class="arrow-right">
      <div class="arrow-right-small">
      </div>
  </div>
</div>

我不会在CSS上发布JavaScript和其他代码，因为滑块可以工作。我只是不知道如何将它们分成两行。