거꾸로 살펴보는 그리드

거꾸로 살펴보는 그리드 시스템

완성된 디자인 결과물을 살펴보고 그리드가 어떻게 사용되었는지 분석해보겠습니다.

1. Grid 트랙 / 거터

메인 영역 콘텐츠와 사이드 영역 콘텐츠는 각각 다른 컬럼 그리드를 사용하고 있습니다. 메인 영역 콘텐츠에 사용된 그리드는 컬럼 사이 간격인 거터가 설정된 반면, 사이드 영역 콘텐츠는 거터가 설정되지 않았습니다.

2. Grid 아이템 병합

컬럼(column) 트랙을 병합한 그룹을 찾아낼 수 있습니다. 병합된 영역 내에 콘텐츠를 레이아웃 할 수 있습니다.

그리드 시스템 활용

Expedia 메인 페이지 리뉴얼 디자인은 그리드 시스템을 활용하여 제작 되었습니다. 12컬럼 그리드와 양쪽에 공간을 두는 거터(split gutters)를 활용한 디자인 입니다.

결과물