Edit in JSFiddle

HTML
CSS
Result

<!DOCTYPE html>
<html>

<head>
  <title>반응형 그리드</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="../css/style.css">
</head>

<body>
  <div id="div1"></div>
  <div id="div2"></div>
  <div id="div3"></div>
  <div id="div4"></div>
  <div id="div5"></div>
  <div id="div6"></div>
</body>

</html>

#div1{
  width: 100% ;
  height:60px;
  background-color: #ff0000;
}

#div2{
  width: 100%;
  height: 350px;
  background-color: #ffa500;
}

#div3{
  width: 100%;
  height: 320px;
  background-color: #ffff00;
}

#div4{
  width: 100%;
  height: 385px;
  background-color: #008000;
}

#div5{
  width: 100%;
  height: 200px;
  background-color: #0000ff;
}

#div6{
  width: 100%;
  height: 200px;
  background-color: #4b0082;
}

/* Tablet */

@media (min-width:768px){
  div{
    float: left;
  }
  #div2{
    height: 562px;
  }

  #div3{
    height: 282px;
  }

  #div4{
    width: 50%;
    height: 360px;
  }

  #div5{
    width: 50%;
    height: 180px;
  }

  #div6{
    width: 50%;
    height: 180px;
  }
}

/* Desktop */

@media(min-width:992px){
  #div2{
    width: 50%;
    height: 700px;
  }

  #div3{
    width: 50%;
    height: 350px;
  }

  #div4{
    width: 25%;
    height: 350px;
  }

  #div5{
    width: 25%;
    height: 175px;
  }
  
  #div6{
    width: 25%;
    height: 175px;
  }
}