2025-grid-01

---

Ⅰ. 基礎設定（グリッドコンテナを作る）

---

1️⃣ display: grid / inline-grid — 「グリッドを始動させる」

• 親要素を グリッドコンテナ にするスイッチ。
• これを指定すると、直下の子要素がグリッドアイテムになる。

.container {
  display: grid;        /* または inline-grid */
}

📘 ポイント

• grid：ブロック要素として配置（通常のレイアウトに使う）
• inline-grid：インライン要素として配置（文中に使う小さなグリッド）

➡️ Gridのすべてはここから始まる。

---

2️⃣ grid-template-columns / grid-template-rows — 「行列の構造を定義する」

• 各列・行の幅や高さを決める設計図。
• 単位：px, %, fr, auto, minmax()

.container {
  display: grid;
  grid-template-columns: 200px 1fr 1fr; /* 横方向に3列 */
  grid-template-rows: auto 300px;       /* 縦方向に2行 */
}

📘 ポイント

• fr = 余白を比率で分配する単位（1fr + 2fr → 1:2）
• auto = 中身の大きさで決まる
• minmax(a, b) = 最小a、最大b の間で可変

➡️ ここまでで「マス目の大きさと数」が決まる。

---

3️⃣ gap / row-gap / column-gap — 「マス目の間隔をそろえる」

• 各行・列のすき間（余白）を統一的に設定する。

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;  /* 行と列の両方に20pxずつ空ける */
}

📘 ポイント

• gap = row-gap + column-gap の短縮形。
• Flexbox でも使えるが、Grid では特に効果的。
• margin と異なり、要素間の内側空間だけに均等に適用される。

➡️ デザイン的な一体感を保つ基本設定。

---

Ⅱ. 自動配置と繰り返し定義（柔軟なグリッド化）

---

4️⃣ repeat() — 「同じサイズの列や行を簡潔に定義」

• 同じパターンの列や行を繰り返し定義するための関数。

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

📘 ポイント

• 第一引数：繰り返し回数
• 第二引数：繰り返すサイズまたはパターン
• ネスト可：repeat(2, 100px 1fr) → 100px 1fr 100px 1fr

➡️ コード量を減らし、列数を柔軟に変更しやすくする。

---

5️⃣ auto-fill / auto-fit — 「入るだけ自動で列を詰める」

• repeat() の中で使い、コンテナ幅に合わせて自動的に列を増減。

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

📘 ポイント

• auto-fill：空きセルを保持する（空間を確保）
• auto-fit：空きセルを潰して詰める（実用はこちらが多い）

➡️ レスポンシブに列数を変えたいときの基盤。

---

6️⃣ minmax(min, max) — 「列幅や行高を可変にする」

• 最小値と最大値をセットで指定できる。

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

📘 ポイント

• 狭い画面では200pxを下限として維持
• 広い画面では1frの比率で伸びる
• auto-fitやrepeat()と組み合わせると自動的に列数・幅が変化

---

🪄 代表例：これらをすべて組み合わせた「王道構文」

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

📘 挙動

• 各列は200px以上を保つ
• コンテナが広ければ自動的に列数が増える
• 狭ければ自動的に折り返して1列になる → メディアクエリなしのレスポンシブ