How to set grid-row on grids that are subgrids?

In this youtube tutorial the author sets grid-template-rows to auto auto auto such that the subgrid items get 3 rows each.

Then later he replaces the grid-template-rows:auto auto auto setting with grid-row:1/4 on the CSS for each subgrid.

I'm trying to understand why auto auto auto is interchangeable with grid-row:1/4 ?

grid-template-rows: auto auto auto is not interchangeable with grid-row: 1/4

To see why, consider this example:

section.case {
  display:grid;
  grid-template-columns: auto auto;
  border: 2px solid blue;
}
section.case.one {
  grid-template-rows: auto auto auto;
}
section.case > div {
  display:grid;
  grid-template-rows: subgrid;
  grid-row: 1 / -1;
}  
section.case.two > div:nth-child(1) {
  grid-row: 1 / 4;
}
span {
  height: 20px;
  margin: 5px;
  border: 1px solid red;
}

<section class="case one">
  <div>
    <span>1</span>
    <span>2</span>
    <span>3</span>
  </div>
  <div>
    <span>a</span>
    <span>b</span>
    <span>c</span>
  </div>
</section>
<hr>
<section class="case two">
  <div>
    <span>1</span>
    <span>2</span>
    <span>3</span>
  </div>
  <div>
    <span>a</span>
    <span>b</span>
    <span>c</span>
  </div>
</section>

Here, the case one section uses grid-template-rows: auto auto auto, and the case two section uses grid-row: 1/4 for the first div child.

Now, you can see that grid-template-rows: auto auto auto creates an explicit main grid of three rows, so the spans are placed one per row within each div.

In contrast, grid-row: 1/4 creates an implicit main grid of three rows. There are no rows in the explicit main grid. Consequently, the spans in the second div are constrained to all be in the first track row, and are placed one on top of the other.