<div class="container">
  <div class="container__slot container__slot--header">
    <header class="header">header</header>
  </div>
  <div class="container__slot container__slot--nav">
    <nav class="nav">nav</nav>
  </div>
  <div class="container__slot container__slot--main">
    <main class="main">main</main>
  </div>
  <div class="container__slot container__slot--footer">
    <footer class="footer">footer</footer>
  </div>
</div>
  

.container {
  @media screen and (min-width: 768px) {
    display: grid;
    grid-template-columns: 1fr 200px;
    grid-template-areas:
      "header header"
      "main nav"
      "footer footer";
  }
  
  > .container__slot {
    &.container__slot--header {
      grid-area: header;
    }
    &.container__slot--nav {
      grid-area: nav;
    }
    &.container__slot--main {
      grid-area: main;
    }
    &.container__slot--footer {
      grid-area: footer;
    }
  }
}

.header {
  font-size: 20px;
  height: 50px;
  display: grid;
  place-items: center;
  background-color: rgba(#ff0000, 0.2);
}
.nav {
  font-size: 20px;
  height: 200px;
  display: grid;
  place-items: center;
  background-color: rgba(#00ff00, 0.2);
}
.main {
  font-size: 20px;
  height: 300px;
  display: grid;
  place-items: center;
  background-color: rgba(#0000ff, 0.2);
}
.footer {  
  font-size: 20px;
  height: 100px;
  display: grid;
  place-items: center;
  background-color: rgba(#ff00ff, 0.2);
}