Scrollbar appears when I want to adapt a grid to the viewport

This is driving me crazy. Just trying to fit this grid into the entire page with height and vw value. But when I write it on CSS it appears the scroll bar!!! How do I fix this? Here's the html. It's just a basic thing but I don't know what to do!

.grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(6, 1fr) 0.1fr;
  grid-gap: 10px;
  height: 100vh;
}

.a {
  background-color: #d8d8d8;
  border: solid #000000 2px;
  padding: 10px;
  grid-column: 1 / 4;
  grid-row: 4 / 7;
}

.b {
  background-color: #d8d8d8;
  border: solid #000000 2px;
  padding: 10px;
  grid-column: 2 / 4;
  grid-row: 2 / 4;
}

.c {
  background-color: #d8d8d8;
  border: solid #000000 2px;
  padding: 10px;
  grid-column: 5 / 7;
  grid-row: 1 / 3;
}

.name {
  grid-column: 1 / 3;
  grid-row: 7 / 7;
}

.contact {
  grid-column: 4 / 6;
  grid-row: 7 / 7;
}

<div class="grid">
  <div class="a">a</div>
  <div class="b">b</div>
  <div class="c">c</div>
  <div class="name">
    <p>Name</p>
  </div>
  <div class="contact">
    <p>Contact</p>
  </div>
</div>

Any clues?

Solution

You have to reset your margin for html and body. If you still would like to keep padding, you can give it to your .grid class but reduce the equal value from height.

html, 
body {
  margin: 0
}

.grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(6, 1fr) 0.1fr;
  grid-gap: 10px;
  height: 96vh;
  padding: 2vh
}

.a {
  background-color: #d8d8d8;
  border: solid #000000 2px;
  padding: 10px;
  grid-column: 1 / 4;
  grid-row: 4 / 7;
}

.b {
  background-color: #d8d8d8;
  border: solid #000000 2px;
  padding: 10px;
  grid-column: 2 / 4;
  grid-row: 2 / 4;
}

.c {
  background-color: #d8d8d8;
  border: solid #000000 2px;
  padding: 10px;
  grid-column: 5 / 7;
  grid-row: 1 / 3;
}

.name {
  grid-column: 1 / 3;
  grid-row: 7 / 7;
}

.contact {
  grid-column: 4 / 6;
  grid-row: 7 / 7;
}

<div class="grid">
  <div class="a">a</div>
  <div class="b">b</div>
  <div class="c">c</div>
  <div class="name">
    <p>Name</p>
  </div>
  <div class="contact">
    <p>Contact</p>
  </div>
</div>