Documentation CSS

概要

CSSのjustify-itemsプロパティは、グリッドコンテナまたはフレックスコンテナ内のすべてのアイテムを**インライン軸（inline axis）**方向に配置する際に使用されるプロパティです。このプロパティを使うことで、グリッド内の各アイテムの配置位置を簡単にコントロールできます。特に複雑なレイアウトを作成する際に役立ち、デザインの自由度を高めることができます。

justify-itemsの役割と他のプロパティとの違い

CSSには配置を制御する似たようなプロパティが複数あります。それぞれの違いを理解することが重要です。

配置プロパティの比較

プロパティ適用先制御する対象軸
justify-itemsコンテナすべてのアイテムインライン軸
justify-selfアイテム個別のアイテムインライン軸
justify-contentコンテナコンテンツ全体主軸
align-itemsコンテナすべてのアイテムブロック軸
align-selfアイテム個別のアイテムブロック軸

justify-items vs justify-content

/* justify-items: 各アイテムをセル内で配置 */
.grid-container {
  display: grid;
  justify-items: center; /* 各アイテムをセル内の中央に */
}

/* justify-content: グリッドトラック全体を配置 */
.grid-container {
  display: grid;
  justify-content: center; /* グリッド全体を中央に */
}

視覚的な違い：

  • justify-items：各アイテムがそれぞれのセル内で中央揃え
  • justify-content：グリッド全体がコンテナ内で中央揃え

justify-items vs justify-self

/* justify-items: すべてのアイテムに適用 */
.container {
  display: grid;
  justify-items: start; /* すべてのアイテムを左寄せ */
}

/* justify-self: 特定のアイテムのみ上書き */
.item-special {
  justify-self: end; /* このアイテムだけ右寄せ */
}

justify-itemsの基本構文

CSS Gridでの構文

.grid-container {
  display: grid;
  justify-items: <値>;
}

Flexboxでの構文（限定的サポート）

.flex-container {
  display: flex;
  justify-items: <値>; /* 一部のブラウザでサポート */
}

注意：justify-itemsは主にCSS Gridで使用されます。Flexboxでは代わりにjustify-contentを使用することが推奨されます。

インライン軸とブロック軸

justify-itemsが制御するインライン軸は、書字方向によって変わります。

横書き（horizontal-tb）の場合

.container {
  writing-mode: horizontal-tb; /* デフォルト */
  justify-items: center; /* 水平方向（左右）の中央揃え */
}

インライン軸：水平方向（左→右） ブロック軸：垂直方向（上→下）

縦書き（vertical-rl）の場合

.container {
  writing-mode: vertical-rl; /* 縦書き */
  justify-items: center; /* 垂直方向（上下）の中央揃え */
}

インライン軸：垂直方向（上→下） ブロック軸：水平方向（右→左）

値の種類と視覚的な説明

基本的な配置値

start

アイテムをセルのインライン軸の始点（通常は左端）に配置します。

.container {
  display: grid;
  justify-items: start;
}

視覚的なイメージ（各セル内）：

[Item]_____  [Item]_____  [Item]_____

end

アイテムをセルのインライン軸の終点（通常は右端）に配置します。

.container {
  display: grid;
  justify-items: end;
}

視覚的なイメージ（各セル内）：

_____[Item]  _____[Item]  _____[Item]

center

アイテムをセルのインライン軸の中央に配置します。

.container {
  display: grid;
  justify-items: center;
}

視覚的なイメージ（各セル内）：

__[Item]__  __[Item]__  __[Item]__

stretch（初期値）

アイテムをセル幅いっぱいに引き伸ばします。

.container {
  display: grid;
  justify-items: stretch;
}

視覚的なイメージ（各セル内）：

[___Item___]  [___Item___]  [___Item___]

注意：アイテムにwidthが指定されている場合、stretchは効果がありません。

レガシー値

left（非推奨）

アイテムを左側に配置します。startの使用を推奨します。

.container {
  justify-items: left;
}

right（非推奨）

アイテムを右側に配置します。endの使用を推奨します。

.container {
  justify-items: right;
}

ベースライン配置

baseline

アイテムをベースラインに沿って配置します。

.container {
  display: grid;
  justify-items: baseline;
}

グローバル値

.container {
  justify-items: inherit;   /* 親要素の値を継承 */
  justify-items: initial;   /* 初期値（legacy）に設定 */
  justify-items: revert;    /* ブラウザのデフォルトに戻す */
  justify-items: unset;     /* 継承値または初期値に設定 */
}

値の比較表

値アイテムの位置widthの影響使用場面
startセルの始点受けるテキストやアイコンの左揃え
endセルの終点受ける数値や日付の右揃え
centerセルの中央受けるボタンやバッジの中央揃え
stretchセル幅いっぱい受けないカードやパネルの幅揃え

実践的な使用例

例1：アイコングリッドの中央揃え

各セル内のアイコンを中央に配置する例です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>アイコングリッド</title>
  <style>
    .icon-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
      justify-items: center; /* アイコンをセル内の中央に */
      align-items: center;
      padding: 40px;
      background-color: #f8f9fa;
    }

    .icon-item {
      width: 60px;
      height: 60px;
      background-color: #3498db;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: 24px;
      transition: transform 0.3s, background-color 0.3s;
      cursor: pointer;
    }

    .icon-item:hover {
      transform: scale(1.1);
      background-color: #2980b9;
    }
  </style>
</head>
<body>
  <div class="icon-grid">
    <div class="icon-item">🏠</div>
    <div class="icon-item">📧</div>
    <div class="icon-item">📱</div>
    <div class="icon-item">⚙️</div>
    <div class="icon-item">📊</div>
    <div class="icon-item">💼</div>
    <div class="icon-item">🔔</div>
    <div class="icon-item">👤</div>
  </div>
</body>
</html>

例2：データテーブルの配置

数値は右揃え、テキストは左揃えにする例です。

.data-table {
  display: grid;
  grid-template-columns: 200px 100px 100px 150px;
  gap: 1px;
  background-color: #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
}

.table-header {
  background-color: #2c3e50;
  color: white;
  padding: 15px;
  font-weight: bold;
  justify-self: stretch; /* ヘッダーは幅いっぱい */
}

.table-cell {
  background-color: white;
  padding: 12px 15px;
}

.cell-text {
  justify-self: start; /* テキストは左揃え */
}

.cell-number {
  justify-self: end; /* 数値は右揃え */
}

.cell-center {
  justify-self: center; /* ステータスは中央揃え */
}
<div class="data-table">
  <!-- ヘッダー行 -->
  <div class="table-header">商品名</div>
  <div class="table-header">数量</div>
  <div class="table-header">価格</div>
  <div class="table-header">ステータス</div>

  <!-- データ行 -->
  <div class="table-cell cell-text">ノートPC</div>
  <div class="table-cell cell-number">5</div>
  <div class="table-cell cell-number">¥98,000</div>
  <div class="table-cell cell-center">✅ 在庫あり</div>

  <div class="table-cell cell-text">マウス</div>
  <div class="table-cell cell-number">20</div>
  <div class="table-cell cell-number">¥3,500</div>
  <div class="table-cell cell-center">✅ 在庫あり</div>
</div>

例3：カードグリッドのstretch配置

カードを幅いっぱいに引き伸ばして統一感を出す例です。

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 25px;
  justify-items: stretch; /* カードを幅いっぱいに */
  padding: 40px;
}

.card {
  background: white;
  border-radius: 12px;
  padding: 25px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  transition: transform 0.3s, box-shadow 0.3s;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

.card-title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 12px;
  color: #2c3e50;
}

.card-description {
  color: #7f8c8d;
  line-height: 1.6;
  margin-bottom: 15px;
}

.card-button {
  display: inline-block;
  padding: 10px 20px;
  background-color: #3498db;
  color: white;
  text-decoration: none;
  border-radius: 6px;
  transition: background-color 0.3s;
}

.card-button:hover {
  background-color: #2980b9;
}
<div class="card-grid">
  <div class="card">
    <h3 class="card-title">サービス A</h3>
    <p class="card-description">高品質なサービスを提供します。お客様のニーズに合わせたカスタマイズが可能です。</p>
    <a href="#" class="card-button">詳細を見る</a>
  </div>

  <div class="card">
    <h3 class="card-title">サービス B</h3>
    <p class="card-description">最新技術を活用した革新的なソリューションを提案します。</p>
    <a href="#" class="card-button">詳細を見る</a>
  </div>

  <div class="card">
    <h3 class="card-title">サービス C</h3>
    <p class="card-description">24時間365日のサポート体制で安心してご利用いただけます。</p>
    <a href="#" class="card-button">詳細を見る</a>
  </div>
</div>

例4：フォームレイアウト

ラベルと入力フィールドの配置を制御する例です。

.form-grid {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 20px 15px;
  max-width: 600px;
  padding: 30px;
  background-color: #f8f9fa;
  border-radius: 8px;
}

.form-label {
  justify-self: end; /* ラベルを右揃え */
  align-self: center;
  font-weight: 500;
  color: #2c3e50;
}

.form-input {
  justify-self: stretch; /* 入力フィールドを幅いっぱいに */
  padding: 10px 15px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}

.form-input:focus {
  outline: none;
  border-color: #3498db;
  box-shadow: 0 0 0 3px rgba(52,152,219,0.1);
}

.form-button-group {
  grid-column: 1 / -1;
  justify-self: end; /* ボタンを右揃え */
  display: flex;
  gap: 10px;
}

.form-button {
  padding: 10px 25px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
  transition: background-color 0.3s;
}

.form-button-primary {
  background-color: #3498db;
  color: white;
}

.form-button-primary:hover {
  background-color: #2980b9;
}

.form-button-secondary {
  background-color: #ecf0f1;
  color: #2c3e50;
}

.form-button-secondary:hover {
  background-color: #bdc3c7;
}
<form class="form-grid">
  <label class="form-label">お名前</label>
  <input type="text" class="form-input" placeholder="山田 太郎">

  <label class="form-label">メールアドレス</label>
  <input type="email" class="form-input" placeholder="example@email.com">

  <label class="form-label">電話番号</label>
  <input type="tel" class="form-input" placeholder="090-1234-5678">

  <label class="form-label">メッセージ</label>
  <textarea class="form-input" rows="4" placeholder="お問い合わせ内容をご記入ください"></textarea>

  <div class="form-button-group">
    <button type="button" class="form-button form-button-secondary">キャンセル</button>
    <button type="submit" class="form-button form-button-primary">送信</button>
  </div>
</form>

例5：ギャラリーグリッド

画像を中央に配置し、サイズを保持する例です。

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 15px;
  justify-items: center; /* 画像をセル内の中央に */
  align-items: center;
  padding: 30px;
  background-color: #2c3e50;
}

.gallery-item {
  width: 180px;
  height: 180px;
  border-radius: 8px;
  object-fit: cover;
  transition: transform 0.3s, box-shadow 0.3s;
  cursor: pointer;
}

.gallery-item:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 20px rgba(0,0,0,0.4);
}
<div class="gallery-grid">
  <img src="photo1.jpg" alt="写真1" class="gallery-item">
  <img src="photo2.jpg" alt="写真2" class="gallery-item">
  <img src="photo3.jpg" alt="写真3" class="gallery-item">
  <img src="photo4.jpg" alt="写真4" class="gallery-item">
  <img src="photo5.jpg" alt="写真5" class="gallery-item">
  <img src="photo6.jpg" alt="写真6" class="gallery-item">
</div>

justify-selfとの組み合わせ

justify-itemsはすべてのアイテムに適用されますが、justify-selfを使用して個別のアイテムを上書きできます。

例：デフォルトは中央、特定のアイテムのみ変更

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  justify-items: center; /* すべてのアイテムを中央に */
}

.item-left {
  justify-self: start; /* このアイテムだけ左揃え */
}

.item-right {
  justify-self: end; /* このアイテムだけ右揃え */
}

.item-stretch {
  justify-self: stretch; /* このアイテムだけ幅いっぱい */
}
<div class="container">
  <div class="item item-left">左揃え</div>
  <div class="item">中央</div>
  <div class="item item-right">右揃え</div>
  <div class="item">中央</div>
  <div class="item item-stretch">幅いっぱい</div>
  <div class="item">中央</div>
</div>

align-itemsとの組み合わせ

justify-items（インライン軸）とalign-items（ブロック軸）を組み合わせて、完全な配置制御を実現できます。

完全な中央揃え

.centered-grid {
  display: grid;
  grid-template-columns: repeat(3, 150px);
  grid-template-rows: repeat(3, 150px);
  gap: 20px;
  justify-items: center; /* 水平方向の中央揃え */
  align-items: center; /* 垂直方向の中央揃え */
  padding: 40px;
}

.grid-item {
  width: 60px;
  height: 60px;
  background-color: #3498db;
  border-radius: 50%;
}

place-itemsショートハンド

/* 個別指定 */
.container {
  justify-items: center;
  align-items: center;
}

/* ショートハンド（推奨） */
.container {
  place-items: center; /* align-items と justify-items を一度に設定 */
}

/* 異なる値を指定 */
.container {
  place-items: start end; /* align-items: start; justify-items: end; */
}

実用的なユースケース

ケース1：プロフィールカードグリッド

.profile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 30px;
  justify-items: center; /* プロフィール画像を中央に */
  padding: 40px;
}

.profile-card {
  text-align: center;
  background: white;
  padding: 25px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.profile-avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin-bottom: 15px;
  object-fit: cover;
  border: 4px solid #3498db;
}

.profile-name {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 5px;
  color: #2c3e50;
}

.profile-role {
  color: #7f8c8d;
  font-size: 14px;
}

ケース2：ダッシュボードウィジェット

.dashboard {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 25px;
  justify-items: stretch; /* ウィジェットを幅いっぱいに */
  padding: 30px;
  background-color: #f5f5f5;
}

.widget {
  background: white;
  border-radius: 10px;
  padding: 25px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.widget-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 2px solid #ecf0f1;
}

.widget-title {
  font-size: 18px;
  font-weight: 600;
  color: #2c3e50;
}

.widget-value {
  font-size: 32px;
  font-weight: bold;
  color: #3498db;
}

ケース3：ステータスバッジグリッド

.status-grid {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 15px 20px;
  align-items: center;
  padding: 20px;
}

.status-label {
  justify-self: start; /* ラベルは左揃え */
  font-weight: 500;
  color: #2c3e50;
}

.status-bar {
  justify-self: stretch; /* バーは幅いっぱい */
  height: 8px;
  background-color: #ecf0f1;
  border-radius: 4px;
  overflow: hidden;
}

.status-fill {
  height: 100%;
  background: linear-gradient(90deg, #3498db, #2ecc71);
  border-radius: 4px;
  transition: width 0.5s ease;
}

.status-value {
  justify-self: end; /* 数値は右揃え */
  font-weight: bold;
  color: #3498db;
  min-width: 50px;
  text-align: right;
}

ケース4：価格比較テーブル

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  justify-items: center; /* 各要素を中央に */
  max-width: 1000px;
  margin: 40px auto;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.pricing-plan {
  background: white;
  padding: 40px 30px;
  text-align: center;
  transition: transform 0.3s;
}

.pricing-plan.featured {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  transform: scale(1.05);
  z-index: 1;
}

.plan-name {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 15px;
}

.plan-price {
  font-size: 48px;
  font-weight: bold;
  margin: 20px 0;
}

.plan-features {
  list-style: none;
  padding: 0;
  margin: 25px 0;
}

.plan-features li {
  padding: 10px 0;
  border-bottom: 1px solid rgba(0,0,0,0.1);
}

ブラウザサポート

justify-itemsプロパティは、CSS Gridをサポートするモダンブラウザで使用できます。

ブラウザCSS Gridjustify-items
Chrome57+57+
Firefox52+52+
Safari10.1+10.1+
Edge16+16+
Opera44+44+

機能検出

/* フォールバック：Gridがサポートされていない場合 */
.container {
  display: flex;
  flex-wrap: wrap;
}

/* Gridがサポートされている場合 */
@supports (display: grid) {
  .container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-items: center;
  }
}
// JavaScriptでの機能検出
if (CSS.supports('display', 'grid')) {
  console.log('CSS Gridがサポートされています');
  // justify-itemsを使用
} else {
  console.log('CSS Gridは非サポートです');
  // フォールバック処理
}

パフォーマンスとベストプラクティス

1. stretchの効果を理解する

widthやinline-sizeが指定されている場合、stretchは効果がありません。

/* ❌ stretchが効かない */
.item {
  width: 100px; /* 固定幅が指定されている */
}

.container {
  justify-items: stretch; /* 効果なし */
}

/* ✅ stretchが効く */
.item {
  /* widthを指定しない */
}

.container {
  justify-items: stretch; /* 幅いっぱいに伸びる */
}

2. place-itemsショートハンドの活用

コードを簡潔に保つためにplace-itemsを使用します。

/* ❌ 冗長 */
.container {
  justify-items: center;
  align-items: center;
}

/* ✅ 簡潔 */
.container {
  place-items: center;
}

3. justify-selfとの適切な使い分け

/* すべてのアイテムに適用する場合 */
.container {
  justify-items: center;
}

/* 特定のアイテムのみ変更する場合 */
.special-item {
  justify-self: end;
}

4. レスポンシブデザインでの調整

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

/* モバイル */
@media (max-width: 768px) {
  .container {
    grid-template-columns: 1fr;
    justify-items: center; /* モバイルでは中央揃え */
  }
}

トラブルシューティング

問題1：justify-itemsが効かない

原因1：display: gridが設定されていない

解決策：

/* ❌ 効果なし */
.container {
  justify-items: center;
}

/* ✅ 正しい */
.container {
  display: grid;
  justify-items: center;
}

原因2：アイテムに固定幅が設定されている（stretchの場合）

解決策：

/* ❌ stretchが効かない */
.item {
  width: 200px;
}

/* ✅ 幅を削除 */
.item {
  /* widthを指定しない */
}

問題2：個別のアイテムだけ配置を変えたい

原因：justify-itemsはすべてのアイテムに適用される

解決策：justify-selfを使用

.container {
  justify-items: start;
}

.special-item {
  justify-self: end; /* このアイテムだけ右揃え */
}

問題3：中央揃えがうまくいかない

原因：アイテムのサイズがセルと同じ

解決策：

.container {
  display: grid;
  grid-template-columns: repeat(3, 200px); /* セルサイズ指定 */
  justify-items: center;
}

.item {
  width: 100px; /* セルより小さいサイズ */
}

問題4：FlexboxでのjustifyItems使用

原因：Flexboxではjustify-itemsが効かない

解決策：justify-contentを使用

/* ❌ Flexboxでは効かない */
.flex-container {
  display: flex;
  justify-items: center;
}

/* ✅ justify-contentを使用 */
.flex-container {
  display: flex;
  justify-content: center;
}

注意点とベストプラクティス

1. CSS Gridでのみ使用

justify-itemsは主にCSS Gridで使用されます。Flexboxではjustify-contentを使用してください。

/* Grid */
.grid-container {
  display: grid;
  justify-items: center; /* ✅ 使用可能 */
}

/* Flexbox */
.flex-container {
  display: flex;
  justify-content: center; /* ✅ これを使用 */
  /* justify-items: center; */ /* ❌ 効果なし */
}

2. インライン軸の理解

justify-itemsはインライン軸を制御します。書字方向によって軸が変わります。

/* 横書き：インライン軸 = 水平 */
.horizontal {
  writing-mode: horizontal-tb;
  justify-items: center; /* 水平方向の中央 */
}

/* 縦書き：インライン軸 = 垂直 */
.vertical {
  writing-mode: vertical-rl;
  justify-items: center; /* 垂直方向の中央 */
}

3. セルサイズとアイテムサイズの関係

justify-itemsの効果を確認するには、アイテムがセルより小さい必要があります。

.container {
  grid-template-columns: repeat(3, 200px); /* セル幅200px */
}

.item {
  width: 100px; /* アイテム幅100px */
  /* justify-itemsの効果が見える */
}

4. アクセシビリティへの配慮

視覚的な配置を変更する際は、論理的な順序を保つことが重要です。

/* 視覚的な順序と DOM の順序を一致させる */
.container {
  display: grid;
  justify-items: end;
  /* DOMの順序も視覚的な意図に合わせる */
}

関連プロパティ

justify-itemsと一緒に使用されることが多いプロパティです。

アイテム配置関連

  • justify-self：個別アイテムのインライン軸配置
  • align-items：すべてのアイテムのブロック軸配置
  • align-self：個別アイテムのブロック軸配置
  • place-items：align-itemsとjustify-itemsのショートハンド
.container {
  display: grid;

  /* すべてのアイテムの配置 */
  justify-items: center; /* インライン軸 */
  align-items: center; /* ブロック軸 */

  /* または */
  place-items: center; /* 両方を一度に設定 */
}

.item-special {
  /* 個別アイテムの配置 */
  justify-self: end; /* インライン軸 */
  align-self: start; /* ブロック軸 */

  /* または */
  place-self: start end; /* 両方を一度に設定 */
}

コンテンツ配置関連

  • justify-content：グリッドトラック全体のインライン軸配置
  • align-content：グリッドトラック全体のブロック軸配置
  • place-content：align-contentとjustify-contentのショートハンド
.container {
  display: grid;

  /* グリッド全体の配置 */
  justify-content: center; /* インライン軸 */
  align-content: center; /* ブロック軸 */

  /* アイテムの配置 */
  justify-items: start; /* 各アイテムのインライン軸 */
  align-items: start; /* 各アイテムのブロック軸 */
}

コードサンプル：実践的な実装

レスポンシブプロダクトグリッド

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>プロダクトグリッド</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background-color: #f5f5f5;
      padding: 40px 20px;
    }

    .product-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 30px;
      justify-items: stretch; /* プロダクトカードを幅いっぱいに */
      max-width: 1200px;
      margin: 0 auto;
    }

    .product-card {
      background: white;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 4px 12px rgba(0,0,0,0.08);
      transition: transform 0.3s, box-shadow 0.3s;
      display: flex;
      flex-direction: column;
    }

    .product-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 12px 24px rgba(0,0,0,0.12);
    }

    .product-image {
      width: 100%;
      height: 220px;
      object-fit: cover;
      background-color: #ecf0f1;
    }

    .product-info {
      padding: 20px;
      flex-grow: 1;
      display: flex;
      flex-direction: column;
    }

    .product-category {
      font-size: 12px;
      text-transform: uppercase;
      color: #3498db;
      font-weight: 600;
      margin-bottom: 8px;
      letter-spacing: 0.5px;
    }

    .product-title {
      font-size: 20px;
      font-weight: bold;
      color: #2c3e50;
      margin-bottom: 12px;
    }

    .product-description {
      color: #7f8c8d;
      line-height: 1.6;
      margin-bottom: 20px;
      flex-grow: 1;
    }

    .product-footer {
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: center;
      gap: 15px;
    }

    .product-price {
      font-size: 28px;
      font-weight: bold;
      color: #2c3e50;
      justify-self: start; /* 価格を左揃え */
    }

    .product-button {
      padding: 12px 24px;
      background-color: #3498db;
      color: white;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      font-weight: 600;
      transition: background-color 0.3s;
      justify-self: end; /* ボタンを右揃え */
    }

    .product-button:hover {
      background-color: #2980b9;
    }

    /* レスポンシブ調整 */
    @media (max-width: 768px) {
      .product-grid {
        grid-template-columns: 1fr;
        justify-items: center; /* モバイルでは中央揃え */
      }

      .product-card {
        max-width: 400px;
      }
    }
  </style>
</head>
<body>
  <div class="product-grid">
    <div class="product-card">
      <img src="product1.jpg" alt="製品1" class="product-image">
      <div class="product-info">
        <div class="product-category">Electronics</div>
        <h3 class="product-title">ワイヤレスヘッドフォン</h3>
        <p class="product-description">高音質で快適な装着感。長時間のリスニングに最適です。</p>
        <div class="product-footer">
          <span class="product-price">¥12,800</span>
          <button class="product-button">カートに追加</button>
        </div>
      </div>
    </div>

    <div class="product-card">
      <img src="product2.jpg" alt="製品2" class="product-image">
      <div class="product-info">
        <div class="product-category">Accessories</div>
        <h3 class="product-title">スマートウォッチ</h3>
        <p class="product-description">健康管理と通知機能を備えた多機能ウォッチ。</p>
        <div class="product-footer">
          <span class="product-price">¥24,500</span>
          <button class="product-button">カートに追加</button>
        </div>
      </div>
    </div>

    <div class="product-card">
      <img src="product3.jpg" alt="製品3" class="product-image">
      <div class="product-info">
        <div class="product-category">Computing</div>
        <h3 class="product-title">ワイヤレスマウス</h3>
        <p class="product-description">精密なトラッキングと快適な操作性を実現。</p>
        <div class="product-footer">
          <span class="product-price">¥5,980</span>
          <button class="product-button">カートに追加</button>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

まとめ

justify-itemsプロパティは、CSS Gridレイアウトにおいてすべてのアイテムをインライン軸方向に配置するための重要なプロパティです。

主な特徴

  1. 一括配置：すべてのアイテムの配置を一度に制御
  2. セル内配置：各グリッドセル内でのアイテム位置を決定
  3. 柔軟な配置オプション：start、end、center、stretchなど多様な配置方法

よく使われる値

値使用場面
startテキストやラベルの左揃え
end数値や日付の右揃え
centerアイコンやボタンの中央揃え
stretchカードやパネルの幅統一

覚えておくべきポイント

  • CSS Grid専用：主にGridレイアウトで使用（Flexboxではjustify-content）
  • すべてのアイテムに適用：個別変更はjustify-selfを使用
  • インライン軸を制御：書字方向によって軸の方向が変わる
  • align-itemsと組み合わせ：place-itemsショートハンドで簡潔に記述
  • stretchの条件：アイテムにwidthが指定されていると効果なし

justify-itemsプロパティを活用することで、CSS Gridレイアウトのアイテム配置を効率的に制御し、整った美しいデザインを実現できます。

参考リンク

参照:

justify-items - CSS: カスケーディングスタイルシート | MDN

参照:

justify-items - CSS: Cascading Style Sheets | MDN

参照:

CSS Grid Layout Module Level 2 - W3C

参照:

CSS Box Alignment Module Level 3 - W3C

参照:

place-items - CSS | MDN
円