レイアウト
grid-template-rows
grid-template-rows は、グリッドの箱の行の数と、それぞれの行の高さを指定します。書き方は grid-template-columns と同じで、行の高さ（トラック）を上から順に並べて書きます。
構文
none | <track-list> | <auto-track-list> | subgrid <line-name-list>?プレビュー
1234
プリセット
見本
右下の角をドラッグするとサイズを変えられます
コード
.box {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 2fr;
}コントロール
grid-template-rows1fr 2fr
repeat() の回数3
トラック（列や行の大きさ）
トラック 1
minmax()
トラック 2
minmax()
1234
解説
値の書き方
行の高さを、上の行から順にスペースで区切って書きます（grid-template-rows: 1fr 2fr）。
none：行を決めません。初期値です。行は項目の数に合わせて自動で作られ、高さはgrid-auto-rows（初期値はauto）で決まります。- 長さ・%：その高さに固定します。% は箱の中身の高さに対する割合です。
fr：固定の高さの行や gap を引いて余った高さを、fr の数の比で分けます。auto・min-content・max-content：中身から高さを決めます。minmax()・repeat()：grid-template-columnsと同じように使えます。
箱の高さが決まっていないとき
fr は余った高さを分けるので、箱の高さが決まっていないと分けるものがありません。height を書いていない箱は中身に合わせた高さになり、fr の行は比を保ったまま中身が収まる高さに、% の行は auto と同じになります。ページ全体を「ヘッダー・本文・フッター」に分ける grid-template-rows: auto 1fr auto では、箱に min-height: 100vh などを書いて、本文の行が伸びる分の高さを作っておきます。
このページのプレビューは、補助の宣言で display: grid と grid-template-columns: 1fr 1fr にして、4 つの項目を 2 行 2 列に並べています。箱の高さは決まっているので、fr で高さを分けるのが見えます。
行は項目の並びで増える
項目は初期値では行を左から右へ埋めていくので（grid-auto-flow: row）、項目が書いた行に入りきらないと、下に行が足されます。足された行の高さは grid-auto-rows で決まります。
このページで扱わない書き方
線の名前（[header-start] auto [header-end]）、fit-content()、subgrid は、このページのコントロールではまだ扱っていませんが、コードには書けます。意味は grid-template-columns と同じです。