Why is grid-template-rows 1fr not taking the whole available screen?

Question

This is my html :

<div id="wrapper">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
</div>

and my css :

#wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

#wrapper {
  border: 2px solid #f76707;
  
}

#wrapper > div {
  border: 2px solid #ffa94d;
}

And this is the result :

There is a jsFiddle for it.

How come the rows are not stretched to occupy all the available screen space ?

Answer 1

because your wrapper doesnt have full screen height. refactor your code like this:

#wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  height:100vh;
}