CSS:grid-auto-rowsだけの指定でなぜ６０段になる？

Question

ここの内容を確認していて
どうも理解できないところがあり教えて下さい。

グリッド用のコンテナのCSSが以下のようになっております。
row関係の指定は”grid-auto-rows: 1fr;”だけです。

当初、思ったのは、列が３列指定になっているので、これだと
３セルごとにrowができ、このサンプルだと８要素あるので
３段だけのグリッドになるのでは？
というものでしたが、実際には”６０”段になっています。

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 1fr;
    grid-gap: 1em;
    max-width: 1440px;
    margin: 0 auto;
}

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>  
</div>

<div class="text-box">
  <span class="text">Stan Lee</span>
  <span class="text">1922-2018</span>
</div>

/*** Fonts ***/
@import url('https://fonts.googleapis.com/css?family=Bangers');

/*** Box Reset ***/
* {
  box-sizing: border-box;
}

body {
  background-color: #e3e3e3;
}

.container{
  display: grid;
  grid-template-columns: repeat(3, 1fr);  
  grid-auto-rows: 1fr;
  grid-gap: 1em;
  max-width: 1440px;
  margin: 0 auto;
}

.item{
  display: inline-block;
  min-height: 400px;
  width: 50%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

/*** Images With Color Fallbacks ***/
.item:nth-child(1){
  background-color: #e74c3c;
  background-image: url(https://i.pinimg.com/originals/e1/12/f8/e112f875d7f05db887f3d7750474fb1a.jpg);
  background-position: center top;
}

.item:nth-child(2){
  background-color: #3498db;
  background-image: url(https://static.comicvine.com/uploads/original/8/80103/4528554-amazing_spider-man_vol_3_19.1_ponsor_variant_textless.jpg);
  background-position: center 35%; 
}

.item:nth-child(3){
  background-color: #bdc3c7;
  background-image: url(http://www.writeups.org/wp-content/uploads/Black-Panther-Avengers-Marvel-Comics-h427.jpg);
  background-position: center 20%;
}

.item:nth-child(4){
  background-color: #2c3e50;
  background-image: url(http://designrfix.com/wp-content/uploads/2010/05/The-incredible-hulk-art-12.jpg);
} 

.item:nth-child(5){
  background-color: #2c3e50;
  background-image: url(http://image.noelshack.com/fichiers/2018/46/1/1542053976-stanleefol5.png);
  background-position: center 20px;
} 

.item:nth-child(6){
  background-color: #27ae60;
  background-image: url(http://cdn.collider.com/wp-content/uploads/2015/01/fantastic-four-comic-2.jpg);
  background-position: 50% 25%;
} 

.item:nth-child(7){
  background-color: #f1c40f;
  background-image: url(https://nerdeux.files.wordpress.com/2011/09/rogues-thor-01.jpg);
  background-position: left 27%;   
} 

.item:nth-child(8){
  background-color: #2980b9;
  background-image: url(https://2.bp.blogspot.com/-YSoMZR-S8CU/VRhKBl7HsZI/AAAAAAAAQqs/_s8iKmBMCUs/s1600/x-men-1-cover.jpg);
  background-position: center 22%;  
} 

/*** Grid Set Up ***/
@supports (display:grid){
  .item{
    width: auto;
    min-height: 0;
  }
  
  .item:nth-child(1){
    grid-column: 1 / span 1;
    grid-row: 1 / 20;  
    -webkit-clip-path: polygon(0 0, 80% 0, 100% 76.5%, 0 100%);
    clip-path: polygon(0 0, 80% 0, 100% 76.5%, 0 100%);
    margin-bottom: -93px;
  }

  .item:nth-child(2){
    grid-column: 2 / span 1;
    grid-row: 1 / 20;  
    -webkit-clip-path: polygon(0 0, 100% 0, 75% 80%, 15.5% 100%);
    clip-path: polygon(0 0, 100% 0, 75% 80%, 15.5% 100%);
    margin-left: -21%;
    margin-right: -5%;
  }

  .item:nth-child(3){
    grid-column: 3 / span 1;
    grid-row: 1 / 20; 
    -webkit-clip-path: polygon(25% 0, 100% 0, 100% 100%, 0 53%);
    clip-path: polygon(25% 0, 100% 0, 100% 100%, 0 53%);
    margin-left: -28%;
    margin-bottom: -150px;
  }

  .item:nth-child(4){
    grid-column: 1 / span 1;
    grid-row: 20 / 40; 
    -webkit-clip-path: polygon(0 22.5%, 100% 0, 100% 77.5%, 0 100%);
    clip-path: polygon(0 22.5%, 100% 0, 100% 77.5%, 0 100%);
    margin-top: -5px;
    margin-bottom: -93px;    
  } 

  .item:nth-child(5){
    grid-column: 2 / span 1;
    grid-row: 20 / 40;
    -webkit-clip-path: polygon(0 13%, 74% 0, 100% 9.25%, 100% 100%, 0 100%);
    clip-path: polygon(0 13%, 74% 0, 100% 9.25%, 100% 82%, 65% 100%,0 82%);
    margin-top: -67px;
    margin-left: -1%;
    margin-bottom: -86px;
  } 

  .item:nth-child(6){
    grid-column: 3 / span 1;
    grid-row: 20 / 40;
    -webkit-clip-path: polygon(0 0, 100% 34.5%, 100% 100%, 0 68.5%) ;
    clip-path: polygon(0 0, 100% 34.5%, 100% 100%, 0 68.5%);
    margin-left: -1%;
    margin-top: -20px;
    margin-bottom: -150px;
  } 

  .item:nth-child(7){
    grid-column: 1 / 3;
    grid-row: 40 / 60; 
    -webkit-clip-path: polygon(0 30%, 49% 0, 75% 38%, 34% 100%, 0 100%);
    clip-path: polygon(0 30%, 49% 0, 82% 27%, 34% 100%, 0 100%);
    margin-top: -7px;
  } 

  .item:nth-child(8){
    grid-column: 2 / span 2;
    grid-row: 40 / 60;
    -webkit-clip-path: polygon(0 100%, 57% 0, 100% 48%, 100% 100%, 0 100%);
    clip-path: polygon(0 100%, 57% 0, 100% 48%, 100% 100%, 0 100%);
    margin-left: -15%;
    margin-top: -7px;
  }   
}

/*** Floating Text ***/
.text-box{
  position: absolute;
  top: 560px;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
}

.text{
  display: block;
  text-align: center;
  color: whitesmoke;
  text-shadow: 0px 3px 15px #000;
  font-family: 'Bangers', cursive;
  font-size: 3.5vmax;
}

grid-auto-rowsはgrid-template-rowsの指定がない場合、
または、それを超えたところにセルがある場合の高さを指定するプロパティーと
理解しています。

なのでこの指定だけで、なぜ６０段なのか？
６０という数字はどこから来ているのか？
という点について教えて下さい

Comments

[hatena19]

６０段とは、６０行という意味ですか。
状況を再現できるコードをHTMLも含めて提示てください。

containerクラスを持つdiv要素内にdiv要素を８個入れて確認してみましたが、提示のCSSだと3行になりました。

[Lhankor_Mhy]

HTMLをご提示ください。
とりあえず、適当なHTMLで試してみましたが問題が再現しませんでしたので、ご提示いただいていない部分に原因があると思われます。

[Fujiman]

質問が不完全ですみません、HTMLとフルのSCSSを追加しました

[Fujiman]

また６０段という表現もすみません。６０行です

Answer 1

.item に

grid-row: 1 / 20;

grid-row: 20 / 40;

grid-row: 40 / 60;

を設定しているからです。
40 / 60 というのは、40行目から60行目までに配置するいう意味なので、
60行必要になります。

Comments

[Fujiman]

ありがとうございます。
ソウナンですか！
各アイテムの位置指定は出来上がったグリッドラインで行うもので
まだできてもいないライン名（や番号）で指定するものではないと
思い込んでいました。
ということはアイテム側からグリッドラインを
生成することも可能ということになりますね。
すごく勉強になりました