Grid Template Rows（grid-template-rows）行トラックプロパティ

最終更新：2026-09-13

grid-template-rows Grid Template Rows（grid-template-rows）行トラックプロパティ

grid-template-rows プロパティは、グリッドコンテナ内の行トラックの数と高さを定義します。各行トラックのサイズを指定することで、行構造を正確に制御できます。grid-template-columns と組み合わせることで、グリッドの基本的な骨組みを形成します。固定長、パーセンテージ、fr 単位、minmax() などの関数をサポートします。

カテゴリ
初期値	none
継承	いいえ
適用対象
アニメーションタイプ
CSS バージョン	CSS3
状態	標準

📝 構文

grid-template-rows: none | <track-list> | <auto-track-list>;

⚙️ 値

値	タイプ	説明
`none`	キーワード	明示的な行トラックなし
`<track-list>`	タイプ	行トラックのリスト

▶ 例

以下のコードを編集して、プレイグラウンドでライブ結果を確認してください：

▶ 試す

🌐 ブラウザーサポート

ブラウザー	Chrome	Edge	Firefox	Safari	Opera
grid-template-rows	✓ v57	✓ v16	✓ v52	✓ v10.1	✓ v44
すべての主要ブラウザーでサポート

ヒント： コンテナの高さを固定し、中央の行を 1fr にすることで、残りの空間を自動的に埋められます。これはページレイアウトの典型的な手法です。

ヒント： auto キーワードは行のサイズをコンテンツから決め、高さがまちまちな行に適しています。

❓ よくある質問

Qgrid-template-rows はコンテナの固定高さを必要としますか？

A必須ではありません。コンテナに明示的な高さがない場合、行トラックは既定で auto になり、その行内で最も高いアイテムのコンテンツによって引き伸ばされます。fr などの単位で行の高さを比例分配するときだけ、計算の基準としてコンテナに確定した高さが必要です。それ以外では fr はコンテンツの高さにまで低下します。ページ全体のレイアウトでは、コンテナに height: 100vh や固定高さを与え、ヘッダー・メイン・フッターの骨組みに auto 1fr auto を使うのが一般的です。

Q行の高さをコンテンツに合わせて変化させるにはどうすればよいですか？

A行トラックのサイズを auto にするか、単に grid-template-rows を省略してください。すると各行の高さはコンテンツで決まり、コンテンツが多いほど行は高くなります。最小の高さを強制するには、grid-auto-rows: minmax(100px, auto) を使います。これは行を最低 100px に保ちつつ、コンテンツに合わせて伸びることを許可します。fr 単位は高さを比例分配するため、コンテンツに適応できない点に注意してください。

Qページ全体のレイアウトにおいて、grid-template-rows: auto 1fr auto は何を意味しますか？

Aこれは典型的なヘッダー・メイン・フッターのレイアウトです。1 行目の auto の高さはヘッダーのコンテンツで決まり、2 行目の 1fr はコンテナの残りの高さをすべて吸収してメイン領域がコンテナとともに伸び、3 行目の auto の高さはフッターのコンテンツから来ます。grid-template-columns とコンテナの高さ 100vh と組み合わせると、ヘッダーとフッターがはみ出さず、メイン領域が流動的なページ全体の骨組みが得られます。