CSS 入門

Grid grid-template-rows と grid-template-columns で自在にレイアウト

CSS Gridは非常に強力なレイアウトツールであり、複雑なレスポンシブデザインを比較的容易に作成することを可能にします。

一次元のレイアウトに特化したFlexboxとは異なり、Gridは二次元レイアウトを得意とし、行（Rows）と列（Columns）を同時にコントロールできます。

CSS Gridを使用する上での基礎は、グリッド自体の構造を定義することにあります。これは、grid-template-rows と grid-template-columns プロパティを通じて、行と列の数およびサイズを指定することを意味します。これらのプロパティを効果的に使いこなせるかどうかが、CSS Gridのポテンシャルを最大限に引き出し、洗練されたレイアウトを構築するための鍵となります。

1. grid-template-rows と grid-template-columns の基本概念

これら2つのプロパティは、グリッドコンテナの行と列を定義するために使用されます。具体的には、行と列の「数」と「それぞれのサイズ」を指定します。

  • grid-template-rows: グリッドコンテナ内の各行の高さを定義します。
  • grid-template-columns: グリッドコンテナ内の各列の幅を定義します。

これらのプロパティには、様々な単位、キーワード、関数を組み合わせて値を割り当てることができ、柔軟に異なるグリッドレイアウトを作成できます。

2. 基本的な構文

grid-template-rows と grid-template-columns の基本構文は、各行または各列のサイズをスペースで区切ってリスト化するだけです。

.grid-container {
  display: grid;
  /* 3つの行を定義し、高さはそれぞれ 100px, 200px, 150px */
  grid-template-rows: 100px 200px 150px; 
  /* 3つの列を定義し、弾力性のある幅を使用 */
  grid-template-columns: 1fr 2fr 1fr; 
}

この例では、グリッドコンテナが3行3列として定義されています。grid-template-rows はピクセル単位で各行の高さを指定し、grid-template-columns は fr ユニットを使用しています。fr は「fractional unit」の略で、グリッドコンテナ内の利用可能なスペースの断片を表します。

3. 固定単位 (px, em, rem) の使用

ピクセル (px)、em、rem などの固定単位を使用して、行と列の正確なサイズを指定できます。

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

この例では、行と列の両方に固定サイズが適用されています。1行目は高さ 100px、2行目は 150px、3行目は 200px です。同様に、列幅はそれぞれ 200px、150px、200px となります。

  • ユースケース: プロダクト画像のグリッドを表示する場合など。画面サイズに関わらず、各画像の一貫したサイズとアスペクト比を維持したい時に有効です。
  • アンチパターン: 固定単位のみを使用すると、異なる画面サイズでレイアウトが崩れる原因になります。コンテンツが固定サイズを超えるとオーバーフローが発生したり、モバイル端末などの小画面に適合しなくなったりします。

4. 弾力性のある単位 (fr) の使用

fr ユニットは、グリッドコンテナ内の利用可能なスペースの「1配分」を表します。異なる画面サイズに適応するレスポンシブなレイアウトを作成するための強力なツールです。

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

この例では、行と列に fr ユニットを使用してリサイズを行っています。

  • grid-template-rows は、2行目の高さを1行目と3行目の2倍に指定しています。
  • grid-template-columns は、利用可能な幅を3つの列に均等に配分します。
  • ユースケース: メインコンテンツエリアと2つのサイドバーを持つダッシュボードのデザインなど。メインエリアに多くのスペースを割り当てつつ、サイドバーを一定の比率で維持したい場合に最適です。
  • アンチパターン: fr ユニットを使用する際は、最小コンテンツサイズを考慮する必要があります。アイテム内のコンテンツが配分された比率以上のスペースを必要とする場合、レイアウトが意図せず崩れることがあります。

5. パーセンテージ (%) の使用

パーセンテージを使用して、グリッドコンテナのサイズに対する相対的な行と列のサイズを定義できます。

.grid-container {
  display: grid;
  grid-template-rows: 20% 60% 20%;
  grid-template-columns: 25% 50% 25%;
}

この例では、行の高さはコンテナの高さの 20%、60%、20% となり、列の幅はコンテナの幅の 25%、50%、25% となります。

  • ユースケース: 親コンテナの全幅・全高を占有するグリッドレイアウトを作成したい場合。親コンテナの変化に合わせてグリッドアイテムを比例的にスケーリングできます。
  • アンチパターン: 他の単位と比較して、複雑なレイアウトでは精度が低くなる傾向があります。実際のサイズがコンテナ自体のサイズや中のコンテンツに依存して変化しやすいためです。

6. auto キーワードの使用

auto キーワードを使用すると、内部のコンテンツに合わせて自動的に行または列のサイズを調整できます。

.grid-container {
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 1fr auto 1fr;
}

この例では：

  • 1行目と3行目はコンテンツに応じて高さを自動調整し、2行目が残りのスペースを占有します。
  • 2列目はコンテンツに応じて幅を自動調整し、1列目と3列目が残りのスペースを均等に分け合います。
  • ユースケース: ヘッダーやフッター（コンテンツによって高さが決まる）と、残りスペースを埋めるメインコンテンツエリアで構成されるレイアウトに非常に有用です。
  • アンチパターン: auto に頼りすぎると、コンテンツの量に大きな差がある場合に予期しないレイアウトになることがあります。より正確に制御するには、auto を他の単位と組み合わせるのがベストです。

7. minmax() 関数の使用

minmax() 関数は、min 以上かつ max 以下のサイズ範囲を定義します。行や列に対して最小・最大サイズを設定できます。

.grid-container {
  display: grid;
  grid-template-rows: minmax(100px, auto) 1fr minmax(150px, auto);
  grid-template-columns: minmax(200px, 1fr) 2fr minmax(150px, 1fr);
}

この例では：

  • 1行目の最小高さは 100px で、コンテンツに合わせて増大 (auto) できます。
  • 1列目の最小幅は 200px で、利用可能なスペースの1配分 (1fr) まで増大できます。
  • ユースケース: 最小サイズを保証しつつ、コンテンツが大きくなった際にも柔軟に対応させたいレスポンシブなレイアウトに最適です。
  • アンチパターン: 最小サイズ (min) を大きく設定しすぎると、小画面でコンテンツがはみ出したり、デザインが壊れたりするリスクがあります。

8. repeat() 関数の使用

repeat() 関数は、同じサイズの行や列を複数定義するプロセスを簡略化します。「繰り返す回数」と「それぞれのサイズ」の2つの引数を取ります。

.grid-container {
  display: grid;
  /* 等価: 1fr 1fr 1fr */
  grid-template-rows: repeat(3, 1fr); 
  /* 等価: 25% 25% 25% 25% */
  grid-template-columns: repeat(4, 25%); 
}

この例では：

  • grid-template-rows は、高さ 1fr の行を3つ定義しています。
  • grid-template-columns は、幅 25% の列を4つ定義しています。
  • ユースケース: フォトギャラリーやデータテーブルなど、同じサイズの行・列が大量に並ぶレイアウトを作成する際に非常に便利です。
  • アンチパターン: すべての行・列が異なるサイズを持つ必要があるレイアウトには向きません。

9. 異なる単位と関数の混合

複雑で柔軟なグリッドを作成するために、異なる単位や関数を自由に組み合わせることができます。

.grid-container {
  display: grid;
  grid-template-rows: auto 1fr minmax(100px, auto);
  grid-template-columns: 200px 1fr repeat(2, 100px);
}

この例では：

  • grid-template-rows: 1行目は auto、2行目は 1fr、3行目は minmax(100px, auto)。
  • grid-template-columns: 1列目は固定 200px、2列目は 1fr、3列目と4列目はそれぞれ固定 100px。
  • ユースケース: ビューポートのサイズやコンテンツの変化に細かく適応させる必要がある、本格的なプロダクトのレイアウトに推奨されます。
  • アンチパターン: 組み合わせが複雑すぎると、コードの解読やメンテナンスが困難になります。柔軟性とシンプルさのバランスを保つことが重要です。

10. 実戦的なサンプルとデモ

grid-template-rows と grid-template-columns の使い方を、具体的なコードで見ていきましょう。

10.1 構成案 1：標準的なグリッドレイアウト

固定単位の行と、弾力性のある単位の列を組み合わせた、ベーシックな3x3のグリッドです。

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  grid-template-rows: 100px 150px 100px;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}
.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}
</style>
</head>
<body>
<h1>標準的なグリッドレイアウト</h1>
<div class="grid-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>
</body>
</html>

10.2 構成案 2：レスポンシブ・グリッドレイアウト

repeat() 関数と auto-fit、minmax() を組み合わせた、画面幅に応じて列数が変わるレスポンシブなグリッドです。

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  /* 最小 200px の列を、コンテナ幅に合わせて自動で詰め込む */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}
.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}
</style>
</head>
<body>
<h1>レスポンシブ・グリッドレイアウト</h1>
<div class="grid-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>
</body>
</html>

10.3 構成案 3：複雑なページ構造レイアウト

固定幅、弾力性のある幅、そして auto を組み合わせた、より実践的なレイアウト制御の例です。

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  grid-template-rows: auto 1fr minmax(100px, auto);
  grid-template-columns: 200px 1fr repeat(2, 100px);
  gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}
.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}
</style>
</head>
<body>
<h1>複雑なグリッドレイアウト</h1>
<div class="grid-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>11</div>
  <div>12</div>
</div>
</body>
</html>

これらの例を通じて、grid-template-rows と grid-template-columns がいかに強力にグリッド構造を定義し、コントロールできるかが分かります。各プロパティの挙動を深く理解し、プロジェクトに最適な設定を選び抜きましょう。