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