Resources:

• https://gridbyexample.com/
• http://cssgridgarden.com/

Result:

css:

.header {
  grid-area: header;
  background-color: #fed330;
  padding: 20px;
}

.content {
  grid-area: content;
  background-color: #20bf6b;
  padding: 20px;
}

.sidebar {
  grid-area: sidebar;
  background-color: #45aaf2;
  padding: 20px;
}

.footer {
  grid-area: footer;
  background-color: #fd9644;
  padding: 20px;
}

.grid {
  display: grid;
  grid-gap: 20px;
  grid-template-columns: 1fr 3fr;
  grid-template-areas: 
    "header  header"
    "sidebar content"
    "footer  footer";
}

@media (max-width: 500px) {
  .wrapper {
    grid-template-columns: 4fr;
    grid-template-areas:
      "header"
      "content"
      "sidebar"
      "footer";
  }
}

html:

<div class="grid">
  <header class="header">Header</header>
  <article class="content">
    <h1>Content</h1>
  </article> 
  <aside class="sidebar">Sidebar</aside>
  <footer class="footer">Footer</footer>
</div>