<div class="wrapper">
  <div class="header">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem officia delectus fuga
      illum totam ipsam ab voluptatem numquam quis assumenda consectetur eaque laudantium minima earum eligendi, quos dicta
      voluptatibus maiores aperiam, laboriosam expedita, nostrum incidunt repudiandae. Velit modi facilis, porro, architecto
      voluptate excepturi assumenda aliquid libero harum quae incidunt animi?
      Tempore eveniet sapiente fuga hic blanditiis doloribus illum eligendi sunt!!</p>
  </div>
  <div class="sidebar">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum eveniet excepturi,
      ipsum ipsa maxime recusandae dolore molestias alias dolorem facere.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum eveniet excepturi,
      ipsum ipsa maxime recusandae dolore molestias alias dolorem facere.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum eveniet excepturi,
      ipsum ipsa maxime recusandae dolore molestias alias dolorem facere.</p>
  </div>
  <div class="content">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias voluptates tenetur
      dolorem animi ex praesentium qui ducimus autem? Nisi, iusto esse ex quae nihil tempore temporibus eum, aut n
      atus molestias deleniti omnis optio. Minus laborum temporibus eum, reprehenderit, optio consectetur quo ex
      ad beatae corporis recusandae!</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum eveniet excepturi,
      ipsum ipsa maxime recusandae dolore molestias alias dolorem facere.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum eveniet excepturi,
      ipsum ipsa maxime recusandae dolore molestias alias dolorem facere.</p>
  </div>
  <div class="footer">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum eveniet excepturi,
      ipsum ipsa maxime recusandae dolore molestias alias dolorem facere. Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum eveniet excepturi,
      ipsum ipsa maxime recusandae dolore molestias alias dolorem facere.</p>
  </div>

</div>

html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
html,
body {
  padding: 0;
  margin: 0;
}

.wrapper {
  display: grid;
  min-height: 100vh;
  max-width: 1600px;
  margin: auto;
  grid-template-columns: 1fr 2fr;
  /*grid-auto-rows: minmax(100px, auto);*/
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "hd hd "
    "sd main"
    "ft ft";
  /*padding-left: 20rem; no its never this*/
  /* padding-right: 20rem;no its never this*/
  padding: 0 1rem;
  grid-gap: 1rem;
  text-align: center;
  font-size: 1rem;
  justify-content: center;
}
.header {
  grid-area: hd;
  background-color: lightblue;
  /*height: 20vh; no you can't do this */
  /* min-height:20vh; do this instead if indeed needed at all*/
}
.content {
  grid-area: main;
  background-color: rgb(116, 206, 233);
  /*height: 60vh; no you can't do this unless you put scrollbars on this section, Instead  let it  stretch to fit the space available  */
}
.sidebar {
  grid-area: sd;
  background-color: rgb(13, 135, 175);
  /* height: 60vh; nope - let it  stretch to fit the space available*/
}
.footer {
  grid-area: ft;
  background-color: rgb(76, 186, 223);
  /* height: 20vh; no you can't do this */
  /* min-height:20vh;do this instead if needed */
}
.header,
.sidebar,
.footer,
.content {
  padding: 1rem 2rem 0;
}

@media screen and (max-width: 768px) {
  .wrapper {
    font-size: 1rem;
    grid-template-columns: auto;
    grid-template-columns: auto;
    grid-template-areas:
      "hd"
      "main"
      "sd"
      "ft";
  }
}

/*

Forum question answer only:

https://www.sitepoint.com/community/t/grid-template-areas-headache/381397/5



*/