> For the complete documentation index, see [llms.txt](https://yamoo9.gitbook.io/css-grid/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://yamoo9.gitbook.io/css-grid/grid-system.md).

# 거꾸로 살펴보는 그리드

![](https://3440753900-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LH1dN99ZXtZTFG_0JKV%2F-LH8I_66xgjE1z7_jl5n%2F-LH8ItVl76LkjCf9-eHo%2Fimage.png?alt=media\&token=41c5429c-77a3-4b13-8eee-e8173787c18d)

## 거꾸로 살펴보는 그리드 시스템 <a href="#reverse-overview-about-grid" id="reverse-overview-about-grid"></a>

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

![](https://3440753900-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LH1dN99ZXtZTFG_0JKV%2F-LH8I_66xgjE1z7_jl5n%2F-LH8Iw12iEJhmOoDJU1H%2Fimage.png?alt=media\&token=f2ac1d9d-c3e5-4504-a071-f54aef46fcbf)

### 1. Grid 트랙 / 거터 <a href="#grid-track-gutters" id="grid-track-gutters"></a>

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

![](https://3440753900-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LH1dN99ZXtZTFG_0JKV%2F-LH8I_66xgjE1z7_jl5n%2F-LH8IxlqGqq8__xx3F7p%2Fimage.png?alt=media\&token=6dc620fd-462d-49fb-aeb4-b607d29a3f36)

### 2. Grid 아이템 병합 <a href="#combine-grid-items" id="combine-grid-items"></a>

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

![](https://3440753900-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LH1dN99ZXtZTFG_0JKV%2F-LH8I_66xgjE1z7_jl5n%2F-LH8IzMCAV5fJ5MrFXZ4%2Fimage.png?alt=media\&token=4ec6a29b-e376-4bee-9463-b48050021a55)

![](https://3440753900-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LH1dN99ZXtZTFG_0JKV%2F-LH8I_66xgjE1z7_jl5n%2F-LH8J-vLQghAStOvLBB2%2Fimage.png?alt=media\&token=04ee2820-f27d-4c96-abeb-2389c110a80a)

## 그리드 시스템 활용 <a href="#using-grid-system" id="using-grid-system"></a>

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

![](https://3440753900-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LH1dN99ZXtZTFG_0JKV%2F-LH8I_66xgjE1z7_jl5n%2F-LH8J1Hk5nWcV1RLxGgD%2Fimage.png?alt=media\&token=4055c6fd-8c4a-4ae4-8d86-b6ad26cba413)

#### 결과물

![](https://3440753900-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LH1dN99ZXtZTFG_0JKV%2F-LH8I_66xgjE1z7_jl5n%2F-LH8LWZoEIpouyaeq10N%2Fimage.png?alt=media\&token=c63e7640-1952-465d-8da3-92c8cf6463b9)