How do I set height of grid-template-row in CSS?

Question

I am using fullPage.js and I have a section where i need to display some photos. I have created a photo layout using CSS display: grid; but the grid overflows out of the fullPage section.

$(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>

Can anyone help me with sorting this out? I want the grid to have 100% height as per width of device (laptop/monitor). I am a beginner so please excuse any silly mistakes on my part.

P.S. - scrollOverflow:true is set because I have large amount of text content in other sections.