Yugien - 遊戯苑
テーマ

CSS

この記事では、CSS Gridの各行の高さや大きさを決めるgrid-template-rowsの基本を説明します。

The grid-template-rows property in CSS specifies the height (size) of each row in a grid layout, thereby controlling the layout in the row direction.

grid-template-rows

はじめに

CSS Grid Layoutは、2次元レイアウトをより柔軟かつ簡単に実装できる強力なレイアウトモジュールです。これまで、Webページのレイアウトではfloatやinline-block、Flexboxなどを組み合わせる必要がありました。しかし、CSS Gridは行（row）と列（column）の両方向でレイアウトを制御できるため、より直感的にページの構成を定義できます。

その中でも本記事の主役である**grid-template-rows**プロパティは、グリッドレイアウトの行方向のサイズや配置を指定するものです。複数の行をどのように割り当てるかを定義することで、行の高さを自由にコントロールできるようになります。

grid-template-rowsとは

grid-template-rowsは、グリッドコンテナ（display: grid;を指定した要素）の行のサイズを指定するためのプロパティです。値として複数のトラック（行）に関するサイズや、キーワードを指定することで、行の高さをコントロールできます。

基本構文

CSS

.grid-container {
	display: grid;
	grid-template-rows: <track-size> [<track-size> ... ];
}
<track-size>
各行（トラック）のサイズ。pxや%、frなどの単位が利用できます。

例えば、以下のように3つの行を固定で設定するには次のように書きます。

CSS

.grid-container {
	display: grid;
	grid-template-rows: 100px 200px 300px;
}

上記の場合、

というレイアウトを指定できます。

行サイズを指定するための各種単位

grid-template-rowsでは、以下のような多様な単位や値が利用できます。どの単位を使うかで、グリッドの振る舞いが大きく変わります。

絶対値（px、em、remなど）

CSS

.grid-container {
	grid-template-rows: 50px 80px 1em 3rem;
}

特徴:

パーセンテージ（%）

CSS

.grid-container {
	height: 500px; /* パーセンテージを有効にするため明示的に高さを設定 */
	grid-template-rows: 50% 50%;
}

特徴:

fr（フラクション・ユニット）

Grid Layout特有の単位であるfrは、空きスペースを「何等分するか」という基準で指定するものです。フレックスボックスでのflex: 1;のようなイメージに近く、余白を自動で分割できます。

CSS

.grid-container {
	grid-template-rows: 1fr 2fr;
}

この場合、コンテナの高さを確保した上で

特徴:

auto

autoは「必要に応じて高さが変動する」設定です。内容量に応じて自動で伸び縮みしてくれます。

CSS

.grid-container {
	grid-template-rows: auto auto;
}

特徴:

min-content と max-content

min-content
行内の最小幅・最小高さを使ってレイアウトを行う。内容を一行に収めようとする場合などに作用し、改行やオーバーフローを最小化する挙動を示す。
max-content
行内のコンテンツが改行せずに収まる最大幅・最大高さを基準にするため、内容がすべて1行になるまで伸びる場合が多い。

CSS

.grid-container {
	grid-template-rows: min-content max-content;
}

特徴:

minmax() 関数

minmax(min, max) は、行や列のサイズを最小値から最大値までの範囲で指定したいときに使います。指定した範囲内でコンテンツに合わせて伸縮し、レスポンシブかつ制限付きのレイアウトが可能になります。

CSS

.grid-container {
	grid-template-rows: minmax(100px, 300px) auto;
}

よく使われる書き方のパターン

固定行 + 自動行

いくつかの行は厳密に固定したいが、その他は可変にしたい場合があります。そんなときは、固定値とautoを組み合わせると便利です。

CSS

.grid-container {
	grid-template-rows: 200px auto;
}

複数行をまとめるrepeat()関数

repeat()は同じパターンを繰り返し指定したいときに使います。

CSS

.grid-container {
	/* 同じ高さ 3行を作成する */
	grid-template-rows: repeat(3, 200px);
}

あるいはフラクションユニットとも組み合わせられます。

CSS

.grid-container {
	/* 4行それぞれ1frずつ → 等分される */
	grid-template-rows: repeat(4, 1fr);
}

auto-fill / auto-fit との組み合わせ（列指定でよく利用）

grid-template-columnsでauto-fillやauto-fitとminmax()を組み合わせる方法が有名ですが、行方向でも同様の発想で活用できます。ただし、行方向の場合は高さの自動生成がレスポンシブデザインでどう反映されるかを考慮する必要があります。一般には列方向の方がauto-fill / auto-fitが使われやすいですが、行方向でグリッドアイテムが並ぶ場合にも同じロジックを適用できます。

実際のコード例

基本例

以下の例では3行のレイアウトを作り、それぞれの行の高さを固定値・自動値・フラクションユニットで指定しています。グリッドアイテムがどのように配置されるかを確認できます。

1行目・1列目
1行目・2列目
2行目・1列目
2行目・2列目
3行目・1列目
3行目・2列目

HTML

<div class="grid-container">
	<div class="grid-item">1行目・1列目</div>
	<div class="grid-item">1行目・2列目</div>
	<div class="grid-item">2行目・1列目</div>
	<div class="grid-item">2行目・2列目</div>
	<div class="grid-item">3行目・1列目</div>
	<div class="grid-item">3行目・2列目</div>
</div>

CSS

.grid-container {
	display: grid;
	grid-template-rows: 100px auto 2fr;
	grid-template-columns: 1fr 1fr; /* 列が2つ */
	gap: 10px; /* グリッドアイテム間の隙間 */
	border: 2px solid #333;
	height: 80vh; /* 全体の高さをある程度確保 */
}
.grid-item {
	background-color: #f2f2f2;
	border: 1px solid #ccc;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.2rem;
}

minmax()を使った実践例

レスポンシブ対応を考え、ある程度の高さを保ちたいが、広い画面では高さを取りすぎないようにする場合、以下のように書けます。

CSS

.grid-container {
	display: grid;
	/* 1行目は最小150px、最大300px */
	/* 2行目は最大200pxまでに固定しておき、もしコンテンツが少なければ自動調整したい → minmax(auto, 200px) などの指定も可能 */
	grid-template-rows: minmax(150px, 300px) minmax(auto, 200px) 1fr;
	gap: 20px;
}

トラック名（ライン名）の指定

grid-template-rowsを利用する際には、行ごとに名前を付けることも可能です。名前を付けることで、grid-template-areasと組み合わせてコンテンツ配置をわかりやすく制御できます。

CSS

.grid-container {
	display: grid;
	grid-template-rows:
		[header-start] 100px [header-end content-start] auto [content-end footer-start] 100px [footer-end];
}

このように行の開始・終了点に名前を付けておくと、後からgrid-template-areasやgrid-row指定で参照でき、デザインの変更や保守がスムーズになります。

grid-template-rows の注意点・ベストプラクティス

親要素の高さ指定の重要性

コンテンツのオーバーフロー

固定値乱用のリスク

適切なメディアクエリとの併用

まとめ

grid-template-rowsは、単独で使っても十分レイアウトを制御できますが、実際にはgrid-template-columnsやgrid-template-areas、gapなどのプロパティと組み合わせることで、さらに高度なレイアウト設計が可能となります。行だけでなく列方向やコンテンツの配置までも視野に入れた総合的なデザイン設計を行うと、CSS Gridの真価を最大限に引き出せます。

追加リファレンス

上記リファレンスでは、さらに詳しい仕様やブラウザ対応状況などが確認できますので、参考にしてください。