CSS ・ Flexbox・Grid
grid-template-rows
グリッドの行
Gridレイアウトで、行の数と高さ（行のトラックの高さ）を定義します。grid-template-columns と組み合わせて、縦横のマス目を作ります。
01
サンプルコード
HTML
1<div class="wrapper">
2 <div class="box_01">要素1</div>
3 <div class="box_02">要素2</div>
4 <div class="box_03">要素3</div>
5 <div class="box_04">要素4</div>
6 <div class="box_05">要素5</div>
7 <div class="box_06">要素6</div>
8</div>
CSS
1.wrapper {
2 height: 240px;
3 background-color: #ddd;
4 border: #aaa 1px solid;
5 display: grid;
6 grid-template-columns: 1fr 1fr 1fr; /* 3つのトラック（列）を定義 */
7 grid-template-rows: 1fr 2fr; /* 2つのトラック（行）を定義 */
8}
9.wrapper div {
10 font-size: 12px;
11}
12.box_01 { background-color: red; }
13.box_02 { background-color: green; }
14.box_03 { background-color: blue; }
15.box_04 { background-color: yellow; }
16.box_05 { background-color: cyan; }
17.box_06 { background-color: purple; }
02
実行結果
ブラウザでの表示1fr 2fr なので、親の高さ 240px を 1:2 に分け、上の行が 80px、下の行が 160px になります
03
解説
grid-template-rows に高さを並べると、その数だけ行ができます。100px 200px なら「高さ100pxの行」と「高さ200pxの行」の2行です。
単位 fr を使えば、親要素にフィットする形で配置されます。上の例では親の高さが 240px なので、1fr 2fr は 80px と 160px に分かれます。1fr 1fr にすれば同じ高さの2行です。
列は grid-template-columns、行は grid-template-rows で決めます。2つをセットで書くと、何列×何行のマス目かがひと目で分かります。
04
応用例・注意点
指定できる値
| 値 | 説明 |
|---|---|
1fr 1fr | 親の高さを2等分した2行 |
100px 1fr | 高さ100pxの行と、残りを埋める行 |
repeat(3, 1fr) | 同じ高さの行を3つ（1fr 1fr 1fr と同じ） |
auto | 中身の高さに合わせた行 |
none | 行を定義しない（初期値。中身に合わせて自動で行ができる） |
ヘッダー・本文・フッターの3段レイアウト
上下は中身の高さ、真ん中は残り全部にすると、フッターを画面の下に置けます。
HTML
1<body class="page">
2 <header>ヘッダー</header>
3 <main>本文</main>
4 <footer>フッター</footer>
5</body>
CSS
1.page {
2 min-height: 100vh;
3 display: grid;
4 grid-template-rows: auto 1fr auto;
5}
注意点
- 01親に高さがないと、fr で指定した行は中身の高さになります。fr で分けたいときは、親に height を指定します。
- 02定義した行より子要素が多いと、足りない行は自動で追加されます（高さは中身に合わせた auto）。