CSS Grid 全体整列

JPKODA 編集部 May 6, 2026

justify-content、align-content、および place-content は、グリッド全体をコンテナ内のどこに配置するかを精密に制御するための強力なプロパティです。

これらのプロパティが必要になるのは、主に「グリッドアイテムの合計サイズがコンテナのサイズよりも小さい場合」や「固定サイズのトラックによって余分なスペースが生じている場合」です。前章で学んだ justify-items（セル内での対斉）が「アイテム内部」の配置を扱うのに対し、本章では「グリッドの外側」にあるスペースの分配方法を探索します。

1. justify-content の理解

justify-content プロパティは、グリッドアイテムの総幅がコンテナの幅より小さいとき、グリッド全体を行軸（通常は水平方向）に沿ってどう配置するかを定義します。

1.1 justify-content の主な値

start: グリッドをコンテナの開始エッジ（左側）に寄せます。
end: グリッドをコンテナの終了エッジ（右側）に寄せます。
center: グリッドをコンテナ内の水平中央に配置します。
stretch: アイテムのサイズを調整してコンテナを埋めます（サイズが auto の場合のみ有効）。
space-around: 各アイテムの周囲に均等なスペースを配置します。両端のスペースはアイテム間のスペースの半分になります。
space-between: 最初と最後のアイテムを両端に配置し、残りのスペースをアイテム間で均等に分配します。
space-evenly: すべてのアイテム間および両端のスペースを完全に均等にします。

1.2 コード例：水平方向の余白分配

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

.container {
  display: grid;
  grid-template-columns: repeat(3, 100px); /* 合計300px */
  width: 600px; /* 余白が300px発生 */
  justify-content: center; /* グリッド全体を中央寄せ */
  border: 2px solid black;
}

2. align-content の理解

align-content プロパティは justify-content と同様ですが、ブロック軸（通常は垂直方向）に対して作用します。

グリッドトラック（行）の合計高さがコンテナの高さより低い場合、その垂直方向の余白をどう配分するかを決定します。

2.1 align-content の主な値

justify-content と同じ値（start, end, center, stretch, space-between, space-around, space-evenly）を使用できます。

center: グリッド全体を垂直方向の中央に配置します。
space-between: 最初の行を上端に、最後の行を下端に配置し、行間にスペースを分配します。

2.2 コード例：垂直方向の余白分配

.container {
  display: grid;
  grid-template-rows: repeat(2, 50px); /* 合計100px */
  height: 300px; /* 余白が200px発生 */
  align-content: space-between; /* 上下に振り分け、中間に余白 */
  border: 2px solid black;
}

3. place-content の理解（ショートハンド）

place-content は、align-content と justify-content を一度に設定できる便利なショートハンドです。

3.1 構文

place-content: <align-content> <justify-content>;

1つの値を指定: 垂直と水平の両方に同じ値が適用されます。
2つの値を指定: 1つ目が垂直方向（align-content）、2つ目が水平方向（justify-content）になります。

3.2 place-content の活用例

.container {
  display: grid;
  place-content: center; /* 上下左右すべての中心にグリッドを配置 */
}

4. 実戦ケース：レスポンシブ・カードレイアウト

グリッド全体をコンテナ内の中央に保ちつつ、レスポンシブなカードレイアウトを作成する例です。

<div class="card-container">
  <div class="card"><h3>Card 1</h3><p>Content...</p></div>
  <div class="card"><h3>Card 2</h3><p>Content...</p></div>
  <div class="card"><h3>Card 3</h3><p>Content...</p></div>
</div>

.card-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 20px;
  height: 600px;
  place-content: center; /* カードの塊をコンテナの真ん中に配置 */
  border: 2px solid black;
}

.card {
  background-color: #f0f0f0;
  padding: 20px;
  text-align: center;
}

この設定により、カードが数枚しかなく横幅が余っている場合でも、カードの塊が常に画面の中央に配置され、プロフェッショナルな見た目を維持できます。