---

🎛 CSS Grid 整列チートシート（Ⅲまとめ）

Ⅲは「セルの中の整列（items/self）」と 「グリッド全体の整列（content）」を扱う章です。

文章ではなく視覚イメージで理解できる構成にしています。

---

1️⃣ 軸の理解（最優先）

Grid の整列は 2つの軸に分かれる：

横方向 = インライン軸 → justify-*
縦方向 = ブロック軸 → align-*

横書きなら：

• 左右：justify
• 上下：align

---

2️⃣ セル内での整列（items）

✔ justify-items（左右）

✔ align-items（上下）

✔ place-items（上下 左右）

代表値

start   center   end   stretch(初期値)

イメージ

セル内
+---------+
|   ●     | justify-items:start
+---------+
+---------+
|    ●    | justify-items:center
+---------+

実例

.grid {
  place-items: center; /* セル内中央寄せ */
}

---

3️⃣ 個別アイテムだけ変えたい（self）

✔ justify-self

✔ align-self

✔ place-self

例

.special {
  place-self: end center; 
  /* 縦=end（下） / 横=center（中央） */
}

---

4️⃣ グリッド“全体”の整列（content）

✔ justify-content（横方向：グリッド全体の左右）

✔ align-content（縦方向：グリッド全体の上下）

✔ place-content

※ 効く条件

グリッド全体のサイズ < コンテナのサイズ で余白があるときのみ

値（Flexbox と同じ）

start  end  center  
space-between  space-around  space-evenly  
stretch(既定)

イメージ：

コンテナ（800px）にグリッド（600px）が収まるケース：

[ justify-content:center ]
┌──────────────────────┐
│      +-----+-----+    │
│      |  ■  |  ■  |    │
│      +-----+-----+    │
└──────────────────────┘

---

5️⃣ “items” と “content” の違い（最重要）

目的	プロパティ	対象	何を動かす？
セル内の要素を動かす	justify-items / align-items	各アイテム	セル内の配置
グリッド全体を動かす	justify-content / align-content	グリッド全体	アイテムの塊そのもの
個別の要素だけ変える	justify-self / align-self	1アイテム	セル内の配置（上書き）

📌 多くの初心者が「center にしたのに中央に来ない」 → items と content の混同が原因。

---

6️⃣ stretch の仕組み（items）

justify-items: stretch;
align-items: stretch;

• デフォルト動作
• アイテムが auto サイズ のときだけ → セルいっぱいに“伸びる”

+---------+      +---------+
|  ●●●●● | <-- stretch
+---------+

👉 アイテムが width:100% や height:固定 だと stretch されない。

---

7️⃣ 最も使われる組合せ

✔ セル内中央寄せ（カードUI定番）

place-items: center;

✔ 全体中央寄せ（コンテンツ少ない時）

place-content: center;

✔ 上揃え＋横中央（リスト系UI）

align-items: start;
justify-items: center;

✔ カード1つだけ下寄せ

.card--bottom { align-self: end; }

---

8️⃣ チート図：items / content / self の見える化

┌────────────────────────────┐
│  コンテナ（container）        │ ← justify/align-content が効く
│   ┌──────────────────────┐
│   │ グリッド全体（tracks）  │
│   │  ┌──────────────┐  │
│   │  │ セル（cell）      │
│   │  │   ┌────────┐   │
│   │  │   │ アイテム ● │ ← justify/align-items が効く
│   │  │   └────────┘   │
│   │  └──────────────┘  │
│   └──────────────────────┘
└────────────────────────────┘

self は ● の個別設定

---

9️⃣ まとめ（1スクリーンで眺めたい方向け）

セル内の整列

• justify-items（横）
• align-items（縦）
• place-items（まとめ）

全体の整列

• justify-content（横）
• align-content（縦）
• place-content（まとめ）

例外要素だけ

• justify-self / align-self / place-self

stretch（既定）

• アイテムが auto サイズの場合にセルいっぱいに伸びる