CSS Grid コンテナ

HTML 要素を Grid コンテナ（Grid Container） にするには、その要素の display プロパティを grid または inline-grid に設定する必要があります。Grid コンテナは、直系の子要素である Grid アイテム（Grid Items） の配置を制御します。

1. display プロパティ

display: grid; を指定すると、ブロックレベルの Grid コンテナが作成されます。

.grid-container {
  display: grid;
}

display: inline-grid; を指定すると、インラインレベルの Grid コンテナが作成されます。

.grid-container {
  display: inline-grid;
}

2. grid-template-columns プロパティ

grid-template-columns プロパティは、グリッドのカラム（列）の数と、各カラムの幅を定義します。

値はスペース区切りのリストで指定し、各値は対応するカラムの幅を表します。

2.1 カラム定義の例

以下の例では、4 つのカラムを持つグリッドを定義しています。

.grid-container {
  display: grid;
  /* 4つのカラムを定義し、それぞれの幅を指定 */
  grid-template-columns: 80px 200px auto 40px;
}

3. grid-template-rows プロパティ

grid-template-rows プロパティは、各行（ロウ）の高さを定義します。

3.1 行定義の例

以下の例では、2 つの行の高さを指定しています。

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  /* 1行目を100px、2行目を150pxに設定 */
  grid-template-rows: 100px 150px;
}

4. justify-content プロパティ

justify-content プロパティは、グリッド全体をコンテナ内の 主軸方向（水平方向） に沿って整列させるために使用されます。

注意: グリッドの総幅がコンテナの幅よりも小さい場合にのみ効果があります。

4.1 指定可能な主な値

• space-around: 各カラムの周囲に均等なスペースを配置。
• space-between: 最初と最後のカラムを両端に配置し、中間に均等なスペースを配置。
• space-evenly: すべてのカラム間および両端に、完全に均等なスペースを配置。
• center: グリッドを中央に配置。
• start: グリッドをコンテナの先頭（左端）に配置。
• end: グリッドをコンテナの末尾（右端）に配置。

.grid-container {
  display: grid;
  grid-template-columns: 50px 50px 50px; /* 合計150px */
  /* コンテナの幅がそれより大きい場合、中央に寄せる */
  justify-content: center;
}

5. align-content プロパティ

align-content プロパティは、グリッド全体をコンテナ内の 交差軸方向（垂直方向） に沿って整列させるために使用されます。

注意: グリッドの総高さがコンテナの高さよりも小さい場合にのみ効果があります。

5.1 指定可能な主な値

• center: グリッドを行方向の中央に配置。
• space-around: 各行の周囲に均等なスペースを配置。
• space-between: 最初と最後の行を上下の両端に配置。
• space-evenly: すべての行間および上下の端に、均等なスペースを配置。
• start: グリッドをコンテナの上端に配置。
• end: グリッドをコンテナの下端に配置。

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-template-rows: 50px 50px;
  height: 400px; /* コンテナに高さを指定 */
  /* 行全体を垂直方向の中央に寄せる */
  align-content: center;
}

Grid コンテナのプロパティをマスターすることで、従来の float や inline-block では困難だった複雑なレイアウトを、極めて少ないコード量で構築できるようになります。特に justify-content と align-content の挙動の違いを理解しておくことが、レスポンシブな UI 設計において重要です。