Why percentage value within grid-gap create overflow in CSS grid?

Question

I'd like to have a grid like this:

.grid{
  display:grid;
grid-gap:50%;
  background-color:blue;
}
.grid-1{
  background-color:red;
}

<div class="grid">
 <div class="grid-1">
  test
 </div>
 <div class="grid-1">
  test
 </div>
 <div class="grid-1">
  test
 </div>
</div>

Answer 1

Initially, we cannot resolve the percentage of the grid-gap since it depends on the height so we ignore it (we consider it as auto). The browser is first calculating the height considering content like this:

console.log(document.querySelector('.grid').offsetHeight)

.grid {
  display: grid;
  background-color: blue;
}

.grid-1 {
  background-color: red;
  opacity:0.5;
}

<div class="grid">
  <div class="grid-1">
    test
  </div>
  <div class="grid-1">
    test
  </div>
  <div class="grid-1">
    test
  </div>
</div>