JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
  <div class="box header">Header</div>
  <div class="box sidebar">Sidebar</div>
  <div class="box sidebar2">Sidebar 2</div>
  <div class="box content">Content</div>
  <div class="box nested_sidebar1">Sidebar 2a</div>
  <div class="box nested_sidebar2">Sidebar 2b</div>
  <div class="box footer">Footer</div>
</div>

CSS

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




@media only screen and (min-width: 500px) {
  .wrapper {
    grid-template-columns: 20% 1fr;
    grid-template-rows: 100px repeat(3, 50px) 100px;    
    grid-template-areas: "header   header"
                         "sidebar  content"
                         "sidebar  content"  
                         "sidebar  content" 
                         "sidebar2 sidebar2"                         
                         "footer   footer";
   }
  .nested_sidebar1 {
   grid-row: 3 / 4;
   grid-column: 2 / 3;
 }
.nested_sidebar2 {
   grid-row: 4 / 5;
   grid-column: 2 / 3;
 
}
}


@media only screen and (min-width: 800px) {
  .wrapper {
    grid-gap: 20px;
    grid-template-columns: 120px auto 120px;
    grid-template-rows: 100px repeat(3, 50px) 100px;
    grid-template-areas: "header  header  header"
                         "sidebar content sidebar2"
                         "sidebar content sidebar2"
                         "sidebar content sidebar2"                         
                          "footer  footer  footer";
  }
  }
  
.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 10px;
  font-size: 150%;
}  
  
.header {
  grid-area: header;
  background-color: #999;
}

.sidebar {
  grid-area: sidebar;
}

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

.content {
  grid-area: content;
}

.nested_sidebar1 {
   background-color: orange;
}
.nested_sidebar2 {
    background-color: tomato;
}

.footer {
  grid-area: footer;
  background-color: #999;
}