Practicing Grid and Ran into an Issue with # of Rows:

My original code, focus here is on the CSS rule for .grid:

.grid {
  margin: 0 auto;
  display: grid;
  height: 2000px;
  width:  1000px;
  border: 2px solid blue;
  grid-template-rows: 2fr 1fr 50% 3fr 1fr;
  grid-template-columns: 1fr 60% 1fr;
}

.grid div{
  background-color: hsla(60, 90%, 90%, 0.75);
  border: 1px solid blue;
  border-radius: 5px;
}

/* Grid rows: */

.a {
grid-column: 1 / span 4;
}

.b {
grid-column: 1 / span 4;
}

.f {
grid-column: 1 / span 4;
}

/* Grid Columns:*/

.c {
grid-row: 3 / span 2;
}

.d {
grid-row: 3 / span 2;
}

.e {
grid-row: 3 / span 2;
}

Okay, so I originally only wanted four rows: a, b, f, and the row of columns inbetween. My Original code was this:

.grid {
  margin: 0 auto;
  display: grid;
  height: 2000px;
  width:  1000px;
  border: 2px solid blue;
  grid-template-rows: 2fr 1fr 50% 1fr;
  grid-template-columns: 1fr 60% 1fr;

However, no matter how I adjusted the fourth row (1fr, 5fr, 500px, etc) it did nothing to the webpage. The f row stayed stuck at the bottom with no height and wasn’t getting any larger or smaller. I got a weird idea that there might be more rows and I should add one (not sure where this idea came from as the webpage only renders 3 rows and a 4th row of columns which I am assuming also counts as a row (please correct me if I am wrong)) and it worked! I was then able to adjust the height of the F row, which I had originally assumed was the fourth row but apparently is the fifth (? how is there five rows??). The problem is I have no idea why this worked. This resulted in the code that I posted at the beginning. But why did my original code not work? Why are there 5 rows and not 4? Also, is a row of columns also considered a row? If not then there are two rows I cannot see and I dont know where they are coming from. Im so confused on why this worked or why there are apparently more than 4 rows, one (or two if a row of columns doesnt count as one of the rows) of which I cannot see.

Ps, here is my html:

<!DOCTYPE html>
<html>
  <head>
     <link href="./grid.css" type="text/css" rel="stylesheet">
     <title>Grid Experiment</title>
  <head>

  <body>
     <div class="grid">
        <div class="a">A</div>
        <div class="b">B</div>
        <div class="c">C</div>
        <div class="d">D</div>
        <div class="e">E</div>
        <div class="f">F</div>
     </div>
  </body>


</html>