# Grid

그리드는 수평선과 수직선으로 이루어진 이차원 레이아웃 시스템입니다. 

* columns
* rows
* gutters

컨테이너 요소의 `display: grid`를 지정하면 직계 자식 요소는 모두 그리드 아이템이 됩니다.

```CSS
.container {
    display: grid;
}
```

## 그리드 컨테이너

* `grid-template-columns` : 칼럼의 크기를 원하는 갯수만큼 지정합니다. 절대 크기, 상대 크기, 그리고 *fr*단위를 사용할 수 있습니다.
* `grid-template-rows`
* `gap` = `row-gap` + `column-gap` = `grid-gap` : 트랙 사이의 간격을 지정합니다.
* `grid-auto-rows`, `grid-auto-columns` : 템플릿에 정의한 셀의 갯수보다 아이템이 많은 경우에는 암시적으로 그리드가 생성되는데, 이 때의 셀 크기를 지정합니다.
* `grid-template-areas` : `grid-area`의 이름을 사용해서 아이템이 놓일 영역을 지정합니다.

## 그리드 아이템

* `grid-column` = `grid-column-start` + `grid-column-end` : 1부터 시작되는 번호를 사용해서 아이템이 놓일 영역을 지정합니다.
* `grid-row` = `grid-row-start` + `grid-row-end`
* `grid-area` : `grid-template-areas`에서 사용될 이름을 지정합니다.