justify-items

レイアウト・配置

グリッドコンテナ内のアイテムの水平方向（インライン軸）の配置を制御するプロパティです。全てのグリッドアイテムに対して一括で配置を指定できます。

構文

Syntax

justify-items: start | end | center | stretch

コード例

例 1

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 200px);
  justify-items: center;
}

実行結果

justify-items: center - 各アイテムをセル内の中央に配置

Item 1

Item 2

Item 3

💡 破線はグリッドセルの境界。アイテムが各セルの中央に配置される

各グリッドアイテムをセル内の中央に配置

例 2

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-items: start;
}

実行結果

justify-items: start - 各アイテムをセル内の左端に配置

Item 1

Item 2

Item 3

💡 各アイテムがセルの左端（start）に揃って配置される

各グリッドアイテムをセル内の左端に配置

例 3

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 300px);
  justify-items: stretch;
}

実行結果

justify-items: stretch - アイテムをセルの幅に合わせて伸縮（デフォルト）

Item 1 - 幅100%

Item 2 - 幅100%

💡 stretch（デフォルト）：アイテムがセルいっぱいに広がる

各グリッドアイテムをセルの幅に合わせて伸縮（デフォルト）

例 4

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  justify-items: end;
}

実行結果

justify-items: end - 各アイテムをセル内の右端に配置

Card 1

Card 2

Card 3

💡 レスポンシブカードレイアウトでよく使用される配置パターン

レスポンシブカードグリッドで各カードをセル内の右端に配置

💡 TIPS

justify-selfは個別のアイテムに、justify-itemsは全アイテムに適用される。Flexboxのjustify-contentとは用途が異なるので注意。

⚠️ よくある間違い

Flexboxでは効果がない。グリッドでのみ有効。個別制御にはjustify-selfを使う。

ブラウザサポート

Chrome 57+, Firefox 52+, Safari 10.1+

justify-items

構文

コード例

例 1

例 2

例 3

例 4

💡 TIPS

⚠️ よくある間違い

関連プロパティ

ブラウザサポート