---

🧩 CSS Grid チートシート：Ⅱ. 自動配置と繰り返し定義（完全まとめ）

---

1️⃣ 自動配置の基本（grid-auto-flow）

● grid-auto-flow: row | column | dense

• row（既定）：左→右、上→下に自動配置
• column：上→下、左→右に配置
• dense：空きマスを詰める（再配置される可能性がある）

イメージ

row:    A B C D
        E F G H

column: A C E G
        B D F H

dense の注意点

• レスポンシブ時に 後続アイテムが前へ飛ぶ
• 視覚順が崩れる → 実務では慎重に使用

---

2️⃣ repeat()：繰り返し定義

● 基本形

grid-template-columns: repeat(3, 1fr);
/* 1fr 1fr 1fr と同じ */

● mix も可能

repeat(2, 100px 1fr);
/* 100px 1fr 100px 1fr */

---

3️⃣ auto-fill / auto-fit（可変カラムの中心機能）

✔ 共通目的

「入るだけ列（または行）を増やす」

---

⭐ auto-fill（空きトラックも“維持する”）

grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

• コンテナ幅の限り 列を詰め込む
• 余った領域も 空の列として保持（見えないが存在）
• レスポンシブでは “整列が安定” する

---

⭐ auto-fit（空きトラックを“折りたたむ”）

grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

• アイテムが少ないと空列が折りたたまれ
• 残ったアイテムが 広がって伸びる
• カードUIでよく使う

---

4️⃣ minmax()

● 最小〜最大値を定義

minmax(200px, 1fr)

挙動

• コンテナ幅が狭い → 最小値（200px）を守る
• コンテナに余裕 → fr が余白を分配

応用

repeat(auto-fit, minmax(150px, auto))

→ ギャラリー、商品一覧で定番

---

5️⃣ fr の配分ルール（直感的理解）

grid-template-columns: 200px 1fr 2fr;

• 残りのスペースを 1:2 に配分
• fr 前の要素（200pxなど）はまず確保
• auto の幅は内容に従って確保
• 残りが fr に割り当てられる

---

6️⃣ グリッドの動的拡張（auto-flow と auto-placement）

● アイテムがどう“折り返すか”？

Grid は：

1. 自動フロー方向（row / column）に従って
2. 既存トラック内に入らなければ、新しい行（列）を生成
3. dense なら空きマスに詰め直す

例（row フロー）

[ A ][ B ][ C ]
[ D ][ E ][ F ]
[ G ] ← ここで新行が生成される

列方向へ折り返す場合（column）

A
B
C
── new column
D
E
F

判断基準

• column-flow なら「上→下がいっぱいになったら右へ」
• row-flow なら「左→右がいっぱいになったら下へ」

---

7️⃣ Ⅱ全体の “使うポイント” まとめ

✔ カード系UI

• repeat(auto-fit, minmax(200px, 1fr)) が最強
• カードが均等に拡がる・折り返す

✔ 写真ギャラリー

• auto-fill で列構造を安定
• ビューポートが変わっても “並びが崩れにくい”

✔ テーブル状レイアウト

• 固定幅＋fr の併用
• grid-auto-flow: column で縦方向へ配置

✔ Masonry風（Pinterest風）

• dense を併用すると“詰まり感”が出せる ※ 高さ異なる場合は Subgrid or masonry 対応が必要（最新仕様）