grid-template-rows: 高さを固定させたい場合
grid-template-rowsで高さを指定できるのは設定した行数までで、その後の要素は自動的に成形されその行にある最大要素のサイズに合わせて自動的に整形される。つまりgrid-template-rowsだけではランダムに出力される要素に対して高さ調整することはできない。
基本的な高さを固定させたい場合はgrid-auto-rowsを使うことで高さを調整することができる。つまりgrid-template-rowsは最初の行の指定した要素までで、grid-auto-rowsはその後の行の要素または初期値の高さを指定することができる。
もしすべての高さを固定させたいのであればgrid-auto-rowsだけで問題ない。
例
.wrapper-box{
display: grid;
grid-template-columns: repeat(auto-fit, 300px);
grid-auto-rows: 200px;
grid-template-rows: repeat(auto-fit, 30px 50px);
}grid-auto-rows: 200px;はすべての要素の高さを固定させるものです。このプロパティを使うことで高さを固定することができます。ただgrid-template-rows: repeat(auto-fit, 30px 50px);と指定することで最初の2行までの高さが調整（1行目が20px、2行目が50px）され、その後の行は200pxとなります。
repeat()にはauto-fillとauto-fitがあるのですがauto-fillを使った場合中の要素がなくても必ず固定の高さが出力されます。例えばrepeat(auto-fit, 30px 50px)とした場合、中の要素がなくても空白の80pxが確保されます。
この空白の要素を削除したい場合auto-fitとすることで空白の要素のpxが削除されます。例えばrepeat(auto-fit, 30px 50px)として1行目まで要素が完結していれば50pxは出力されない。
