如何在CSS中设置grid-template-row的高度？

Question

我正在使用fullPage.js，我有一个部分，我需要显示一些照片。我使用CSS display: grid;创建了一个照片布局，但网格溢出了fullPage部分。

$(document).ready(function() {
  $('#fullpage').fullpage({
    sectionsColor: ['#ff0000', '#00ff00', '#0000ff'],
    anchors: ['one', 'two', 'three'],
    scrollOverflow: true,
    scrollingSpeed: 600,
  });
});

.grid {
  display: grid;
  height: 100%; // doesn't seem to have any effect 
  grid-template-rows: repeat(2, 1fr);
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 5px;
}

.itemTitle {
  text-transform: uppercase;
  position: relative;
  right: 750px;
  font-size: 3em;
  transition: all 0.6s ease-in-out;
}

.item {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: bottom;
  padding: 0;
  overflow: hidden;
}

.itemContent {
  background-color: rgba(20, 20, 20, .4);
  height: 100%;
  width: 100%;
  padding: 15px;
  padding-top: 40px;
}

.item-1 {
  grid-row: span 1;
  grid-column: span 2;
}

.item-2 {
  grid-row: span 1;
  grid-column: span 1;
}

.item-3 {
  grid-row: span 1;
  grid-column: span 1;
}

.item-4 {
  grid-row: 1 / span 1;
  grid-column: 3 / span 1;
}

.item-5 {
  grid-row: span 1;
  grid-column: span 1;
}

<section class="section"></section>
<section class="section">
  <div class="container-fluid">
    <h1 class="uv-intro-title">Heading</h1>
    <div class="row grid">

      <div class="item item-1 col-md-4">
        <div class="itemContent edl">
          <h2 class="itemTitle">1</h2>
          <p class="uv-eco-itemDesc">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
          <a href="#" class="btn btn-visit">visit site</a>
        </div>
      </div>

      <div class="item item-2 col-md-4">
        <div class="itemContent rnr">
          <h2 class="itemTitle">2</h2>
          <p class="uv-eco-itemDesc">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
          <a href="#" class="btn btn-visit">visit site</a>
        </div>
      </div>

      <div class="item item-3 col-md-4">
        <div class="itemContent slr">
          <h2 class="itemTitle">3</h2>
          <p class="uv-eco-itemDesc">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
          <a href="#" class="btn btn-visit">visit site</a>
        </div>
      </div>

      <div class="item item-4 col-md-4">
        <div class="itemContent eqt">
          <h2 class="itemTitle">4</h2>
          <p class="uv-eco-itemDesc">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
          <a href="#" class="btn btn-visit">visit site</a>
        </div>
      </div>

      <div class="item item-5 col-md-4">
        <div class="itemContent swm">
          <h2 class="itemTitle">5</h2>
          <p class="uv-eco-itemDesc">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
          <a href="#" class="btn btn-visit">visit site</a>
        </div>
      </div>

    </div>
  </div>
</section>
<section class="section"></section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.5/jquery.fullpage.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.5/vendors/scrolloverflow.min.js"></script>

任何人都可以帮我解决这个问题吗？我希望网格根据设备的宽度（笔记本电脑/显示器）具有100％的高度。我是初学者，请原谅我的任何愚蠢错误。

P.S。 - scrollOverflow:true已设置，因为我在其他部分中有大量文本内容。