---

📘 Ⅳ. アイテム配置・領域構造・subgrid の総合チートシート

グリッド内の“アイテムの位置”・“領域の形”・“全体構造”を まとめて扱うための完全ガイド（12〜18統合版）

---

1️⃣ grid-column / grid-row（start / end 指定）

● 基本構文

grid-column: start / end;
grid-row:    start / end;

● 例

grid-column: 1 / 3;      ← 列線1〜3（横2セルぶち抜き）
grid-row:    2 / span 2; ← 行2から“2行ぶん”

● ポイント

• line番号で場所を指定
• span による相対指定あり（柔軟性◎）
• 負数は「最後から」：-1（最終線）、-2（最後から2番目）

---

2️⃣ grid-area（4値ショートハンド or 名前指定）

● 4値形式（最強のショートハンド）

grid-area: row-start / column-start / row-end / column-end;

例：

grid-area: 1 / 2 / 4 / 5;

● 名前形式（areas と連携）

grid-area: main;

---

3️⃣ span（相対指定）

● 基本

grid-column: span 2;   ← 今いる位置から横に2セル分
grid-row:    3 / span 3;

● 使うべき場面

• “大きさ”だけ決めて、“位置”は自動配置に任せたいとき
• レスポンシブに強い（トラック数が変わっても壊れない）

● 注意

grid-column: -1 / span 2 は 最終線から右へ伸ばす定義になり無効（右方向に伸ばせないため）。

---

4️⃣ grid-template-areas（領域マップによるレイアウト定義）

● 例

grid-template-areas:
  "header header"
  "sidebar main"
  "footer footer";

● 子要素

.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main    { grid-area: main; }
.footer  { grid-area: footer; }

● 特徴

• 人間にとって可視的なレイアウト設計
• PC/SP 切替が template の書き換えだけで完了
• ただし領域は必ず 矩形である必要がある

---

5️⃣ grid-template（columns + rows + areas の総合ショートハンド）

● 例

grid-template:
  "header header" 80px
  "sidebar main"  1fr
  "footer footer" 60px
  / 200px 1fr;

● 効果

• 行・列・領域を 1つのブロックで定義（最も可読性が高い）
• 論理的な“ページ構成”をそのまま CSS 化できる
• 複雑レイアウトの設計が一気に簡潔に

---

6️⃣ 命名グリッドライン（line naming）

● 例

grid-template-columns:
  [sidebar-start] 200px
  [sidebar-end main-start] 1fr
  [main-end];

使用：

.sidebar { grid-column: sidebar-start / sidebar-end; }

● 特徴

• line番号を覚えずに済む
• 多カラムレイアウトで圧倒的に読みやすい
• 1本の線に複数名前を付けてもよい

---

7️⃣ subgrid（親の線を子に継承）

● 基本

.child {
  display: grid;
  grid-template-rows: subgrid;
  grid-template-columns: subgrid;
}

● 主な用途（2大用途）

① カードUIの内部揃え（header/section/footer の段を揃える）

複数 article の内部構造を完全に揃える。

② 階層構造の列幅・行高さの統一

親 → 子 → 孫まで同じ線を共有し、 雑誌風／ダッシュボードを“ピクセル単位で綺麗にそろえる”。

● 注意点

• 子要素の height/width は auto 的（固定しない）必要がある
• gap も親のものを継承

---

8️⃣ 12〜18（Ⅳ章）の総合まとめ（1画面）

■ grid-column / grid-row
   行線・列線で位置決定。span / 負数も使える。

■ grid-area
   - 4値版：row-start / col-start / row-end / col-end
   - 名前版：areas と連携。

■ grid-template-areas
   レイアウトを文字マップで表し、人間に最もわかりやすい設計方法。

■ grid-template
   行・列・領域をまとめて書く最上位ショートハンド。PC/SP 切替にも最適。

■ line naming
   線に名前をつけ、grid-column: sidebar-start / main-start;
   のように読めるコードを作る。

■ subgrid
   親の線構造を子が共有。カード内部揃え、階層統一に最強。