<div class="container">
  <header><p>ヘッダー</p></header>
  <main><p>メイン</p></main>
  <nav><p>メニュー</p></nav>
  <footer><p>フッター</p></footer>
</div>
/* グリッドコンテナ */
.container {
  display: grid;
  grid-template-areas:
    "header header header"
    "contents contents menu"
    "footer footer footer";
}
/* ヘッダー用アイテム */
header {
  /* 上のgrid-template-areasの"header"に配置する */
  grid-area: header; 
  background: #FFB6C1;
}
main {
  background: #FFCC7E;
}
nav {
  background: #CBC3E3;
}
footer {
  background: #87CEEB;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.