問題
grid-templateを使ってレイアウトを定義したのに、期待通りの配置になりません。何が原因でしょうか？
HTML
<div class="layout">
<header class="header">ヘッダー</header>
<aside class="sidebar">サイドバー</aside>
<main class="main">メインコンテンツ</main>
<footer class="footer">フッター</footer>
</div>CSS
.layout {
display: grid;
grid-template:
"header header" 100px
"sidebar main" 1fr
"footer footer" 80px;
/* 列幅の指定が抜けている */
gap: 10px;
height: 400px;
background-color: #e0e0e0;
}
.header { background-color: #FF6B6B; }
.sidebar { background-color: #4CAF50; }
.main { background-color: #2196F3; }
.footer { background-color: #FFC107; }
/* grid-area の指定が抜けている */実行結果
ヘッダー
サイドバー
メインコンテンツ
フッター
※ 定義したレイアウトと異なる配置になっています
🔧 実際に試してみよう（リアルタイム更新）
上部でHTMLまたはCSSタブを選択して編集すると、下部の結果エリアがリアルタイムで更新されます。
CSSのコメントを外して、正しいグリッドレイアウトを確認してみましょう。
📺 ライブプレビュー
更新中
ヒント
クリックしてヒントを表示
grid-templateでエリアを定義するには、2つの要素が必要です：
- グリッドテンプレートの列幅の指定
- 各要素へのgrid-areaの割り当て
これらが揃って初めて、意図したレイアウトが実現します。
解答
クリックして解答を表示
問題の原因
grid-templateの定義は正しいものの、以下の2点が不足しています：
- 列幅の指定が最後に必要
- 各要素にgrid-areaプロパティでエリア名を指定する必要がある
grid-templateの完全な構文
grid-template:
"エリア名 エリア名" 行の高さ
"エリア名 エリア名" 行の高さ
/ 列幅 列幅; /* スラッシュ後に列幅を指定 */さらに、各HTML要素に対応するgrid-areaの指定が必須です。
修正方法
完全な修正コード
.layout {
display: grid;
grid-template:
"header header" 100px
"sidebar main" 1fr
"footer footer" 80px
/ 200px 1fr; /* 列幅の指定を追加 */
gap: 10px;
height: 400px;
background-color: #e0e0e0;
}
/* 各要素にgrid-areaを指定 */
.header {
grid-area: header;
background-color: #FF6B6B;
}
.sidebar {
grid-area: sidebar;
background-color: #4CAF50;
}
.main {
grid-area: main;
background-color: #2196F3;
}
.footer {
grid-area: footer;
background-color: #FFC107;
}修正後の結果
ヘッダー
サイドバー
メインコンテンツ
フッター
別解: 個別プロパティを使用
/* grid-templateを分解して記述 */
.layout {
display: grid;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
grid-template-rows: 100px 1fr 80px;
grid-template-columns: 200px 1fr;
gap: 10px;
height: 400px;
}この方法の方が読みやすく、エラーも見つけやすいです。
grid-template-areasの注意点
- エリア名は連続した矩形でなければならない
- 空のセルはドット（.）で表現
- 同じエリア名は隣接セルに配置
- エリア名は引用符で囲む
正しい例と間違った例
/* 正しい例 */
grid-template-areas:
"header header header"
"nav main aside"
". footer ."; /* ドットで空セルを表現 */
/* 間違った例 */
grid-template-areas:
"header main header"; /* headerが分断されている */覚えておくポイント
grid-template使用時は列幅指定を忘れない（スラッシュ後）- 各要素に
grid-areaでエリア名を割り当てる - 複雑なレイアウトは個別プロパティの方が管理しやすい
- エリアは必ず矩形で連続している必要がある
- デバッグ時はブラウザの開発ツールでグリッド線を表示すると便利