body {
  margin: 40px;
}

.sidebar {
    grid-area: sidebar;
  }

  .sidebar2 {
    grid-area: sidebar2;
  }

  .content {
    grid-area: content;
  }

  .header {
    grid-area: header;
  }

  .footer {
    grid-area: footer;
  }

  .wrapper {
    background-color: #yellow;
    color: #444;
  }

  .wrapper {
    display: grid;
    grid-gap: 1em;
    grid-template-areas:
     "header"
     "sidebar"
     "content"
     "sidebar2"
     "footer"
  }

  @media only screen and (min-width: 500px)  {
  .wrapper {

    grid-template-columns: 20% auto;
    grid-template-areas:
    "header   header"
    "sidebar  content"
    "sidebar2 sidebar2"
    "footer   footer";
  }
  }

  @media only screen and (min-width: 600px)   {
    .wrapper {
      grid-gap: 20px;
      grid-template-columns: 15% 70% 15%;
      grid-template-areas:
      "header  header  header"
      "sidebar content sidebar2"
      "footer  footer  footer";
    }
  }

.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 10px;
  font-size: 150%; 
}

.header,
.footer {
  background-color: #999;
}

.sidebar2 {
  background-color: #ccc;
  color: #444;
}