2025 grid 05 - izudon/izudon.github.io GitHub Wiki

🏷 CSS Grid チートシート：Ⅴ. グリッドの命名・テンプレート構築・subgrid（総まとめ）

1️⃣ グリッドライン（line naming）

“grid-template-columns / rows” の 線に名前を付ける機能

● 基本

grid-template-columns:
  [sidebar-start] 200px
  [sidebar-end main-start] 1fr
  [main-end];
  • 線番号を覚えずに sidebar-start / sidebar-end のように書ける
  • 1本の線に複数の名前を付けてもよい

● 使用例

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

👉 大規模レイアウトで可読性が爆増。

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

行・列・領域を “1つの宣言” でまとめる最上位構文

● 基本構文

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

これは以下のまとめ：

  • grid-template-areas
  • grid-template-rows
  • grid-template-columns

● 子要素側

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

👉 レイアウトが 見たまま コードになる。 👉 PC/SP 切替も テンプレートを書き換えるだけで完了。

3️⃣ grid-area（領域名による配置）

● 領域名版

grid-area: main;

→ "main" と名のつく矩形領域へ配置。

● 4値ショートハンド版（行線/列線を直接指定）

grid-area: 1 / 2 / 4 / 5;
  • row-start / col-start / row-end / col-end
  • span や -1（最後から）も使える

👉 直接位置を指定する最強の短縮記法。

4️⃣ subgrid（親の線を子へ継承）

Grid Level 2 の目玉。 子グリッドが親の行線・列線をそのまま使える。

✔ 構文

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

✔ 典型例①：カード <article> の内部揃え

複数カードの

  • <header> の高さ
  • <section> の開始位置
  • <footer> の位置

を カード間で完全にそろえる。

図解

subgrid なし → header/section/footer がバラバラにズレる
subgrid あり → 親の行線を共有し「段」がぴたりと揃う

✔ 典型例②：多階層レイアウトの列幅統一

親：200px | 1fr | 2fr
子：subgrid
孫：subgrid

→ 全階層で 同じ列幅 が使われる → ダッシュボード、表、レイアウトフレームで超有効

✔ 注意点

  • 子の高さ/幅は auto 的である必要がある
  • gap も親の値を継承
  • 自動配置（auto-flow）は部分的に制限あり
  • 2025 現在：主要ブラウザはほぼ対応済み

5️⃣ Ⅴ章の本質まとめ（1画面版） 

■ line naming → 線に意味を持たせる（sidebar-start など）
■ grid-template → 行・列・領域をまとめて視覚的に書く
■ grid-area → 名前 or 4値でアイテム配置
■ subgrid → 親の線構造を子へ継承し、段揃えや階層統一を実現

👉 Ⅴ全体は「レイアウト全体の構造化・命名・統一」がテーマ 👉 大規模 UI／PC-SP 切替／カード整列に特に重要

⚠️ **GitHub.com Fallback** ⚠️