<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-area: header;
  height: 80pz;
  background: #FFB6C1;
}
/* メイン用アイテム */
main {
  grid-area: contents; 
  height: calc(100vh - 160px);
  width: calc(100vw - 200px);
  background: #FFCC7E;
}
/* メニュー用アイテム */
nav {
  grid-area: menu;
  width: 200px;
  background: #CBC3E3;
}
/* フッター用アイテム */
footer {
  grid-area: footer;
  height: 80pz;
  background: #87CEEB;
}