<div class="parent">
  <div class="div1">CSS Grid Generator</div>
  <div class="div2">Sidebar</div>
  <div class="div3">Content</div>
  <div class="div4">Footer</div>
</div>

/**
 * CSS from the Layout Generator/Tool
 */
.parent {
display: grid;
grid-template-columns: 200px 1fr;
grid-template-rows: 60px 1fr 60px;
grid-column-gap: 16px;
grid-row-gap: 16px;
}

.div1 { grid-area: 1 / 1 / 2 / 6; }
.div2 { grid-area: 2 / 1 / 3 / 2; }
.div3 { grid-area: 2 / 2 / 3 / 6; }
.div4 { grid-area: 3 / 1 / 4 / 6; }

/**
 * Custom CSS added here 
 */
body {
  font-family: "Raleway", sans-serif;
  background-color: #fffffe;
  padding: 1rem;
}
.parent {
  max-width: 980px;
  height: calc(100vh - 3rem);
  margin: 0 auto;
  gap: 1em 1em;
}
.parent > * {
  display: grid;
  place-content: center;
  border-radius: 5px;
  font-size: 1rem;
  letter-spacing: 0.05rem;
  box-shadow: 0 1px 6px 0 hsl(0, 0%, 0%, 20%);
}
.div1, .div4 {
  color: hsl(22, 78%, 26%);
  background-color: hsl(48, 96%, 89%);
}
.div2 {
  color: hsl(177, 51%, 23%);
  background-color: hsl(177,51%, 82%);
}
.div3 {
  color: hsl(177, 51%, 23%);
  background-color: hsl(177, 51%, 93%);
}

@media only screen and (max-width: 600px) {
  .parent {
    grid-template-columns: 1fr;
    grid-template-rows: 60px repeat(2, auto) 60px;    
  }  
  .parent > * {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
  }
}

/**
 * Checkout my YouTube channel 
 * @link https://www.youtube.com/codewithpalash
 */