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

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

  1. display: grid / display: inline-grid 　グリッドレイアウトを有効化。子要素がグリッドアイテムになる。

  2. grid-template-columns / grid-template-rows 　列・行のサイズを定義。px, %, fr, auto, minmax() などを使用。

  3. gap（または row-gap, column-gap） 　行と列の間隔を一括設定。以前は grid-gap と呼ばれていた。

🧩 Ⅱ. 自動配置と繰り返し定義

  1. repeat() 　同じサイズパターンを繰り返す。例：repeat(3, 1fr)。

  2. auto-fill / auto-fit 　利用可能なスペースに応じて列数を自動調整。レスポンシブ対応に必須。

  3. minmax(min, max) 　セルの最小・最大幅を制御。例：minmax(200px, 1fr)。

  4. grid-auto-rows / grid-auto-columns 　テンプレート外の自動生成セルのサイズを定義。

  5. grid-auto-flow 　自動配置の方向（行・列）や密詰め設定（row / column / dense）。

🧮 Ⅲ. 配置位置・整列に関する設定

  1. justify-items / align-items / place-items 　各セル内でのアイテムの整列位置。(start / center / end / stretch)

  2. justify-content / align-content / place-content 　グリッド全体をコンテナ内でどう配置するかを指定。 　例：中央寄せ、スペース均等分配など。

  3. justify-self / align-self / place-self 　特定のアイテム単位での整列上書き。

🧭 Ⅳ. アイテム配置・領域構造・subgrid の総合レイアウト編

  1. grid-column-start / grid-column-end 　列方向の開始・終了位置を明示。

  2. grid-row-start / grid-row-end 　行方向の開始・終了位置を明示。

  3. grid-column / grid-row 　上記2つを省略記法でまとめた形（例：grid-column: 1 / span 2;）。

  1. grid-area 　行・列の範囲を1行で指定できる（grid-area: row-start / column-start / row-end / column-end;）。

  2. grid-template-areas 　レイアウトを「視覚的なテンプレート文字列」で指定する。 　例： 　css 　grid-template-areas: 　"header header" 　"sidebar main" 　"footer footer"; 　

  3. grid-area（アイテム側） 　上記テンプレートで定義した名前を指定して配置。 　例：grid-area: main;

  1. subgrid（一部ブラウザ対応） 　入れ子のGridで親の行列定義を継承。

📘 Ⅴ. 余白とサイズの高度制御編（gap / auto / minmax 拡張）

  1. gap（row-gap / column-gap）の完全理解
  • gap vs margin
  • レスポンシブでの最適設計
  1. auto / min-content / max-content / fit-content の深掘り
  • 表風レイアウトで必須となる「コンテンツ駆動レイアウト」
  1. トラックサイズ決定アルゴリズム（簡易版）
  • Grid がトラックサイズをどう決めるかの“超重要”基礎理論 （実務で崩れを防ぐ要）

📘 Ⅵ. 暗黙トラックと自動配置編（implicit grid / auto-flow）

  1. explicit grid（明示） vs implicit grid（暗黙）

  2. grid-auto-rows / grid-auto-columns

  3. grid-auto-flow（row / column / dense）

  4. 自動生成されたトラックの挙動と制御

  • Masonry-like の仕組み理解にも効く

📘 Ⅶ. 応用パターン編（repeat / auto-fit / ギャラリー）

  1. repeat(auto-fill, …) / repeat(auto-fit, …) の応用実装

  2. ラップ対応ギャラリー・カード一覧パターン

  3. グリッド幅の最小・最大のバランス設計

  • minmax, flex-basisとの比較

📘 Ⅷ. レイアウト設計編（大規模構成・実務）

  1. Grid × Flex の使い分け
  • メインレイアウトを Grid、カード内部を Flex にする等

  1. grid-template-areas を使ったレイアウト抽象化・命名戦略

  2. subgrid × area 名 × auto-fit を組み合わせた

　　　システム的な UI レイアウト

📘 Ⅸ. デバッグと落とし穴編

  1. ブラウザ DevTools での Grid 可視化

  2. トラック線の可視化・問題箇所の特定

  3. grid 崩れのよくある原因と対処

  • auto の誤用
  • min-content の暴走
  • margin/gap 競合
  • subgrid × height 固定の衝突

📘 Ⅹ. 実践テンプレート集（総仕上げ）

  1. 雑誌風レイアウト（magazine-style）

  2. Pinterest風ギャラリー

  3. カードUI（article構造の最適化）

  4. ダッシュボード

  5. サイドバー＋メイン＋補助領域の3カラムレイアウト

  6. PC/SP メディアクエリ切替テンプレート