웹이 나오기 시작한 초창기에는 종종 table(표)을 사용해 레이아웃을 구성하였다. 그러나 시멘틱한 마크업의 중요성이 대두되며 점차 이 방식은 지양하게 되었는데, 애초에 table이 표 형식의 데이터를 관리하고 제어하기 위해 만들어졌기 때문이다. 또한 table로 구성된 레이아웃은 반응형 디자인을 고려하기에는 적합하지 않았다.
이후 table의 대안으로 꽤 오랜 기간 사용해왔던 것이 float이다. 그러나 역시 float도 본래의 용도는 이미지와 텍스트의 레이아웃이기 때문에 우리가 원하는 복잡한 어플리케이션 레이아웃을 구현하기에는 적합하지 않았고, 여전히 반응형 디자인에서 제어가 어렵다는 단점이 있었다.
결국 CSS Working Group은 table과 float의 단점을 커버하면서, ‘레이아웃'의 용도에 적합한 Grid Layout Model을 만들게 되었다. 앞서 살펴보았던 Flex를 통해 손쉬운 반응형 레이아웃을 구현할 수 있었다.
Flex는 부모 요소 안에서 한 방향으로만 아이템들을 배치할 수 있지만, Grid는 행과 열, 두 가지 방향으로 배치가 가능하기 때문에 어렵고 복잡한 레이아웃 작성에 매우 적합하다.
Grid는 1차원, 2차원 레이아웃을 구상할 수 있다. 아래와 같이 헤더-사이드바-컨테이너-푸터로 이루어진 기본적인 웹 페이지의 전체적인 레이아웃을 짜는 것이 가능하다.
Grid 안의 아이템들도 또다시 grid 레이아웃으로 만드는게 가능하다. 아주 작은 텍스트 단위의 요소도 grid를 사용하여 아이템을 배치할 수 있다.
Grid 레이아웃으로 쉽게 만들 수 있는 홈페이지의 예이다. 헤더-사이드바-컨테이너로 구성되어 있고, 컨테이너 안의 아이템들도 grid를 사용한 것을 확인할 수 있다.
