grid-auto-rows: にパーセントを使うと？

グリッドレイアウトの「rows」と「columns」にパーセントの単位を使ってレイアウトするコツが掴めてきた。

1. グリッドコンテナに高さと幅を 100% に設定する。
2. 分かり易くするためにコンテナで指定する rows と columns のサイズを 10% で指定する。(そうすると横に10マス 縦に 10マスが想定できる。)
3. グリッドコンテナに「grid-template-columns: repeat(auto-fit, 10%);」を指定する。
4. グリッドコンテナに「grid-auto-rows: 10%;」を指定する。
5. Chrome のデベロッパーツールで確認すると以下の図のようになる。

<div class="grid_layout">
  <div id="itemA"><img src="http://zyco.jp/topics/images/trimming.jpg" class="img-width"></div>
  <div id="itemB"><img src="http://zyco.jp/topics/images/crop.jpg" class="img-width"></div>
  <div id="itemC"><img src="http://zyco.jp/topics/images/tweenmax.jpg" class="img-width"></div>
  <div id="itemD"><img src="http://zyco.jp/topics/images/007.png" class="img-width"></div>
</div>

.grid_layout {
  display: grid;
  grid-auto-rows: 10%;
  grid-template-columns: repeat(auto-fit, 10%);
  width: 100%;
  height: 100%;
}
#itemA {
  grid-column: 1 / 5;
  grid-row: 1 / 5;
  background-color: rgba(254,0,26, 1);
  z-index: 1000;
}
#itemB {
  grid-column: 3 / 6;
  grid-row: 7 / 10;
  background-color: rgba(159,217,163, 1);
  z-index: 1003;
}
#itemC {
  grid-column: 4 / 11;
  grid-row: 4 / 11;
  background-color: rgba(0,126,255, 1);
}
#itemD {
  grid-column: 5 / 8;
  grid-row: 2 / 5;
  background-color: rgba(0,126,255, 1);
  z-index: 1004;
}