CSS Gridの整列

JPKODA 編集部 May 6, 2026

justify-items、align-items、および place-items は、グリッドアイテム（Grid Items）をそれぞれのグリッドエリア（Grid Areas）内でどのように整列させるかを制御するためのCSS Gridプロパティです。

これらは、コンテンツが各グリッドセル内のインライン軸（通常は水平方向）およびブロック軸（通常は垂直方向）に沿ってどのように配置されるかを定義し、個々のアイテムの配置を精密にコントロールすることを可能にします。

本セクションでは、各プロパティを深く掘り下げ、詳細な解説、コード例、および実戦的な応用方法を紹介し、これらの重要なグリッドレイアウトツールをマスターできるようサポートします。

1. justify-items の理解

justify-items プロパティは、グリッドコンテナ内のすべてのグリッドアイテムに対して、デフォルトの justify-self 値を定義します。

簡単に言うと、これはグリッドアイテムがそれぞれのグリッドエリア内で水平方向にどう整列するか（インライン軸沿い）を制御します。グリッドコンテナの全子要素に対して、共通の水平整列ルールを設定するものだと考えてください。必要に応じて、個別のグリッドアイテムに justify-self プロパティを使用することで、このルールを上書きすることも可能です。

1.1 justify-items の主な値

stretch (デフォルト値): グリッドアイテムを、そのグリッドエリアの幅いっぱいに引き伸ばします。アイテムに幅が指定されていない場合、エリアの幅に合わせて拡張されます。
start: グリッドアイテムをインライン軸の開始位置（通常は左端）に整列させます。
end: グリッドアイテムをインライン軸の終了位置（通常は右端）に整列させます。
center: グリッドアイテムをインライン軸の中央に配置します。

1.2 justify-items のコード例

HTML 構造:

<div class="grid-container">
  <div class="grid-item">プロジェクト 1</div>
  <div class="grid-item">プロジェクト 2</div>
  <div class="grid-item">プロジェクト 3</div>
  <div class="grid-item">プロジェクト 4</div>
</div>

例 1: justify-items: stretch

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 150px);
  grid-template-rows: repeat(2, 100px);
  justify-items: stretch;
  border: 2px solid black;
}
.grid-item {
  border: 1px solid red;
}

この例では、アイテムは各セルの幅（150px）いっぱいに引き伸ばされます。

2. align-items の理解

align-items プロパティは justify-items と似ていますが、グリッドアイテムの垂直方向の整列（ブロック軸沿い）を制御します。これは、すべてのグリッドアイテムに対するデフォルトの align-self 値を設定します。

2.1 align-items の主な値

stretch (デフォルト値): グリッドアイテムを、そのグリッドエリアの高さいっぱいに引き伸ばします。
start: グリッドアイテムをエリアの上端に整列させます。
end: グリッドアイテムをエリアの下端に整列させます。
center: グリッドアイテムをエリア内の垂直中央に配置します。

2.2 align-items のコード例

例 1: align-items: center

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 150px);
  grid-template-rows: repeat(2, 100px);
  align-items: center;
  border: 2px solid black;
}
.grid-item {
  border: 1px solid red;
  height: auto; /* コンテンツに応じた高さにする */
}

アイテムはセルの中で垂直方向に中央揃えされます。

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

place-items は、align-items と justify-items を一つの宣言で同時に設定できる便利なショートハンドプロパティです。

3.1 place-items の構文

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

1つ目の値が垂直方向（align-items）。
2つ目の値が水平方向（justify-items）。
値が1つだけ提供された場合、両方の属性に同じ値が適用されます。

3.2 place-items のコード例

例: place-items: center

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 150px);
  grid-template-rows: repeat(2, 100px);
  place-items: center; /* 垂直・水平の両方で中央揃え */
  border: 2px solid black;
}

これにより、アイテムはセルの真ん中に完璧に配置されます。

4. 実戦的な応用と練習

4.1 練習 1: コンテンツの完全中央揃え

3x3のグリッドを作成し、すべてのアイテムを各セルの中央に配置します。

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(3, 100px);
  place-items: center;
}

4.2 練習 2: ナビゲーションバーの整列

左にロゴ、右にリンクを配置するレイアウトです。justify-self を使って個別に上書きします。

.nav-grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    align-items: center; /* 垂直方向の中央揃え */
}
.logo {
    justify-self: start; /* ロゴは左端 */
    padding-left: 20px;
}
.nav-links {
    justify-self: end; /* リンクは右端 */
    padding-right: 20px;
}

ここでは、コンテナ全体の justify-items を設定する代わりに、個別のアイテムに対して justify-self を適用することで、柔軟な配置を実現しています。

4.3 練習 3: カードレイアウトの作成

高さ固定のカード内で、ボタンを常に水平中央かつ下部に配置する例です。

.card {
    display: grid;
    grid-template-rows: auto 1fr auto;
    height: 300px;
    padding: 10px;
}
.card button {
    justify-self: center; /* ボタンを水平中央に */
    align-self: end;      /* ボタンを下端に（または row 設定により自動） */
}

5. まとめ

本章では、CSS Gridにおける整列の基本を学びました。

justify-items: すべてのアイテムのデフォルトの水平整列を設定。
align-items: すべてのアイテムのデフォルトの垂直整列を設定。
place-items: 上記2つを同時に設定するショートハンド。
justify-self / align-self: 特定のアイテムだけ整列を上書きしたい場合に使用。

これらのプロパティを組み合わせることで、複雑なレイアウトでもピクセル単位の正確さでコンテンツを配置できるようになります。実際に手を動かして、各値による見た目の変化を確認してみてください。