그리드 시스템은 레이아웃을 잡기 위한 가이드로 콘텐츠 폭, 컬럼, 거터, 마진 4가지 요소로 구성됨.
다양한 해상도와 비율의 디바이스에 최적화된 레이아웃을 구현하기 위해서는 그리드 시스템은 필수다. Desktop, Laptop에서는 12단을 추천하며, Tablet은 6단, Mobile은 4단을 추천.
콘텐츠 폭(Container)
콘텐츠가 들어가는 최대 폭을 말하며 최대폭에 대한 기준을 잡을 때는 다양한 해상도를 고려해서 반응형에 최적화된 최대 너비 기준을 잡아야 함. 폭에 따라 디자인 느낌이 달라지는 데 많은 연령대의 사용자가 있다면 다양한 디바이스에 대한 대응이 필요함. 주로 Laptap처럼 작은 해상도에서도 짤리는 화면이 없도록 기준을 잡는다. (주로 사용하는 콘텐츠 폭 : 1200, 1440, 1600)
컬럼(Column)
실제 콘텐츠를 포함하는 영역. 그리드를 몇 단으로 나눴을 때 한 단을 컬럼이라 하며 컬럼의 너비는 가변 영역이다.
거터(Gutter)
컬럼과 컬럼 사이의 공간. 거터값은 넓을수록 시원한 느낌을 주지만, 너무 넓으면 그룹화가 안되어보이는 단점이 존재함.
마진(Margin)
콘텐츠 폭을 기준으로 좌우 여백을 말한다. 여백이 적당히 있어야 작은 해상도에서 덜 답답해 보인다. (추천 마진 – desktop : 40~120, Laptop : 40~80, Tablet : 24~40, Mobile : 16~20)
주의점
거터값은 넓을수록 시원한 느낌을 주지만 너무 넓으면 그룹화가 안 되어보이고, 너무 좁으면 답답해보이며 콘텐츠끼리 붙어보이면 오히려 가독성이 떨어질 수 있음.
종종 마진을 간과한 경우 작은 해상도의 스크린에서 볼 때 여백이 없어 답답해보일 수 있음.
관련 키워드
해상도, 반응형 레이아웃, 브레이크 포인트