저도 '그리드 디바이스'는 처음 들어봅니다. ^^;

대신 '그리드' 라는 것은 css 템플레이트에서 많이 사용하는 '시스템' 입니다.
(부끄럽지만, 이전에 썼던 글 링크입니다. ^^;  http://sir.co.kr/bbs/board.php?bo_table=pb_lecture&wr_id=179 )

화면폭에 따른 디자인 구분을, 768px에서 많이 하는 이유는, 이전의 테블릿 즉 구세대 ipad 세웠을때 크기이기 때문입니다.  반응형 처음 나왔을때 대응할 만한 모바일 기기는 거의 애플 기기밖에 없어서 초기 화면폭 구분은 거의 애플 모바일 기기의 크기로 나눴었죠.
(역시 예전에 정리했던 글 링크입니다. ^^; http://sir.co.kr/bbs/board.php?bo_table=pb_lecture&wr_id=167#vc_screenbreakpoints )

화면을 12등분으로 선긋기(그리드) 하는 방식일겁니다.
거의모든 반응형 프레임워크가 12등분을 기본으로 하고 있습니다. ^^

화면을 등분해서 일정하게 반응하도록 만드는 표현을 그리드 디바이스라고 부르는거 같던데요~

저도 공부중인데

반응형 레이아웃은

css 미디어 쿼리와 display:inline-block 과 % 이 세가지면 일단락 되는거 같습니다.


@media (min-width: 767px) { // 767px 이상일 때
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) { // 992px 이상일 때
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) { // 1200px 이상일 때
  .container {
    width: 1170px;
  }
}

1.이거 선언해주고
2.container 로 감싸주고
3.안에 div 영역들 display:inline-block 과 % 로 맞춰주면

끝이더라구요..

물론 픽셀에 맞게 레이아웃이 보기좋게 잘 반응하고 정렬되려면 단순한 구조가 젤 좋죠.

예를들어 가로 박스 3개를 display:inline-block 과 width:30% 식 주고
브라우저 크기를 쭉 줄이면 해상도에 맞게 미티러 쿼리의 가로폭이 작동하면서
한 칸씩 착착 내려오는 것처럼..

그리고 해당 3개의 박스에다가

@media (max-width: 767px) { // 767px 보다 작을 때는
 
<div style="display:block; width:100%"></div>
<div style="display:block; width:100%"></div>
<div style="display:block; width:100%"></div>

}

을 적용시켜주면 태블릿 이하로 떨어졌을 때 와 모바일에선 한칸씩 착착 내려오면서 모바일에선
세로3칸의 박스가 되는거죠 ~