<section class="grid-1">
  <div class="item-1">1</div>
  
  <div class="item-2">
    <div class="item-5">5</div>
    <div class="item-6">6</div>
    <div class="item-7">7</div>
  </div>
  
  <div class="item-3">3</div>
  <div class="item-4">4</div>
</section>

body {
  padding-top: 20px;
  background: #f5f7f8;
}

.grid-1 {
  display: grid;
  width: 100%;
  margin: 0 auto;
  
  grid-template-columns: 1fr;
  grid-template-rows: 80px auto auto 80px;
  grid-gap: 10px;
  
  grid-template-areas: "header"
                       "main"
                       "sidebar"
                       "footer";
}

/* items */

.grid-1 div {
  color: white;
  font-size: 16px;
  padding: 10px;
  }

/* rwd */

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

	.grid-1 {
  		max-width: 800px;
	  
	  grid-template-columns: repeat(3, 1fr);
	  grid-template-rows: 80px auto 80px;
	  grid-gap: 20px;
	  
	  grid-template-areas: "header   header   header"
	                       "main     main     sidebar"
	                       "footer   footer   footer";
	}

	.grid-1 div {
	  font-size: 20px;
	  padding: 20px;
	 }

}

/* specific item styles */

.item-1 {
  background: #b03532;
  grid-area: header;
}
.item-2 {
  background: #33a8a5;
  grid-area: main;
  
  display: grid;
  
  grid-template-columns: 1fr 30%;
  grid-template-rows: auto auto;
  grid-gap: 20px;
  
  grid-template-areas: "header header"
                       "article sidebar";
  
}
.item-3 {
  background: #30997a;
  grid-area: sidebar;
}
.item-4 {
  background: #6a478f;
  grid-area: footer;
}
.item-5 {
  background: #da6f2b;
  grid-area: header;
}
.item-6 {
  background: #3d8bb1;
  grid-area: article;
}
.item-7 {
  background: #e03f3f;
  grid-area: sidebar;
}