<div id="wrap">
  <div id="header"></div>
  <div id="nav"></div>
  <div id="box">
    <div id="aside"></div>
    <div id="article1"></div>
    <div id="article2"></div>
    <div id="article3"></div>
  </div>
  <div id="footer"></div>
* {
  margin: 0;
  padding: 0;
}
body {
  background-color: #DCDCDC;
}
#wrap {
  width: 1200px;
  margin: 0 auto; /* 블록구조를 가운데 정렬 */
}
#header {
  height: 100px;
  background-color: #B3E5FC;
}
#nav {
  height: 100px;
  background-color: #81D4FA;
}  
#box {
  display: grid;
  grid-template-areas:
    "aside article1 article1"
    "aside article2 article2"
    "aside article3 article3"
    ;
  grid-template-columns: 30% 70%;
  grid-template-rows: 260px 260px 260px;
} 
#aside {
  grid-area: aside;
  background-color: #4FC3F7;
}
#article1 {
  grid-area: article1;
  background-color: #29B6F6;
}
#article2 {
  grid-area: article2;
  background-color: #03A9F4;

}
#article3 {
  grid-area: article3;
  background-color: #039BE5;

}
#footer {
  height: 100px;
  background-color: #0288D1;
}
@media(max-width: 1280px){
  #wrap {
    width: 96%;
  }
  #box{
    display: grid;
    grid-template-areas:
      "aside article1 article1"
      "aside article2 article3"
      "aside article2 article3"
      ;
    grid-template-columns: 30% 35% 35%;
    grid-template-rows: 260px 520px;
  }
}
@media(max-width: 768px){
  #wrap{
    width: 100%
  }
  #box{
    display: grid;
    grid-template-areas:
      "aside article1 article1"
      "aside article2 article2"
      ;
    grid-template-columns: 30% 35% 35%;
    grid-template-rows: 260px 260px;
  }
  #article3{
    display: none;
  }
}
@media(max-width: 480px){
  #wrap {
    width: 100%;
  }
  #box{
    display: grid;
    grid-template-areas:
      "aside"
      "article1"
      "article2"
      "article3"
      ;
    grid-template-columns: 100%;
    grid-template-rows: 200px 430px 150px;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.