CSS Grid テンプレート｜grid-template-areas で作る 2 次元レイアウト

CSS Grid レイアウト CSS レスポンシブ
結論：30秒で CSS Grid レイアウトを組む
  • 基本記述法: grid-template-areas: "header header" "sidebar main" "footer footer";
  • 領域割り当て: .sidebar { grid-area: sidebar; }
  • 生成ツール: 下のコンポーネントでビジュアルに Grid を構築

1. オンライン CSS Grid レイアウトジェネレーター

スライダーとエリア指定でレスポンシブな CSS Grid コードを即座に生成します。

🏁 この場でCSS Gridを生成する

  
 
 
   




2. 実戦的 3 カラム・ダッシュボードレイアウトコード


.container {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: 60px 1fr 40px;
  grid-template-areas:
    "header  header"
    "sidebar main"
    "footer  footer";
  gap: 16px;
  min-height: 100vh;
}

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




3. 注意点（ハマりどころ）


    

  1. grid-template-areas での「L字型」や「非長方形」指定の禁止

      

    • 領域指定は必ず完全な「長方形（矩形）」でなければなりません。L字型や不連続なドット指定をすると CSS パーサーによって全プロパティが無効（無効指定）化されます。
      • 

    

    2. 

  2. アイテムオーバーフロー時の minmax(0, 1fr)

      

    • Grid 子要素内の長い英単語や code ブロックが親要素を突き破る現象を防ぐため、1fr の代わりに minmax(0, 1fr) を指定するのが定石テクニックです。
      • 

    

    3.