# CSS Grid
CSS Grid는 웹 페이지 레이아웃을 만들기 위한 강력한 2D(행+열) 레이아웃 시스템이야.
> Flexbox가 1차원(가로 또는 세로) 정렬을 위한 도구라면, Grid는 2차원(가로+세로) 정렬을 위한 도구

| 컨테이너 속성 | 설명 | 옵션 |
|---|---|---|
| grid-template-columns | 열 개수 및 크기 설정 |
| grid-template-rows | 행 개수 및 크기 설정 |
| grid-gap | 그리드 간격 설정 | = row-gap + column-gap = gap | 
| grid-auto-rows | 자동 크기 설정 |
| grid-auto-columns | 자동 크기 설정 |
| grid-auto-flow | 아이템 자동 배치 방향 |
| grid-template-areas | 그리드 레이아웃을 시각적으로 구성 |
| align-items |  |
| justify-content |  |

| 아이템 속성 | 설명 | 옵션 |
|---|---|---|
| grid-column | 열 영역 지정 | = grid-column-start + grid-column-end |
| grid-row | 행 영역 지정 | = grid-row-start + grid-row-end |
| grid-area | 그리드 영역 지정 |
| align-self |  |


## CSS Grid 개념 및 기본 구조
CSS Grid는 grid container(부모)와 grid items(자식)으로 구성됨.
```css
.container {
  display: grid;
} /* 이렇게 하면 .container 안의 모든 요소(grid items)가 그리드 아이템으로 변함! */
```

## Grid 컨테이너 속성
Grid 레이아웃을 설정하는 부모 요소의 속성들

### grid-template-columns
그리드의 열(가로) 개수와 크기를 정의!

```css
.container {
  display: grid;
  grid-template-columns: 200px 200px 200px;
} /* 200px 크기의 열이 3개 생성됨! */
```
#### 반응형으로 자동 크기 조정
fr 단위 사용
```css
.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
} /* 각 열이 동일한 너비(1fr = 1 fraction)로 자동 조정됨! */
```

### grid-template-rows
그리드의 행(세로) 크기를 정의!
```css
.container {
  display: grid;
  grid-template-rows: 60px 1fr;
}
```

### grid-gap = gap = row-gap + column-gap
그리드 아이템 간의 간격을 조절!

* row-gap : 행 간격
* column-gap : 열 간격

```css
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px; /* 모든 열과 행 사이에 10px 간격 추가! */
}
```

### grid-auto-rows / grid-auto-columns
명시되지 않은 행 또는 열의 크기를 설정
```css
.container {
  display: grid;
  grid-template-columns: 200px 200px;
  grid-auto-rows: 150px;
} /* 설정된 열 개수보다 많은 아이템이 추가되면, 자동으로 150px 높이의 행이 생성됨! */
```

### grid-auto-flow
그리드 아이템을 자동으로 배치하는 방향을 결정
* row :	행 기준 자동 배치 (기본값)
* column :	열 기준 자동 배치
* dense :	빈 공간을 채우도록 자동 배치
```css
.container {
  display: grid;
  grid-auto-flow: column;
} /* 아이템이 행이 아니라 열 방향으로 자동 배치됨! */
```

### grid-template-areas
그리드 컨테이너에서 영역을 이름으로 정의하고, 자식 요소를 해당 영역에 배치할 수 있음!

```css
.container {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: 50px 1fr 50px;
  grid-template-areas:
    "header header"
    "sidebar content"
    "footer footer";
}
.header {
  grid-area: header;
}
.sidebar {
  grid-area: sidebar;
}
.content {
  grid-area: content;
}
.footer {
  grid-area: footer;
}
```

## Grid 아이템 속성
각 개별 아이템에 적용하는 속성들!

### grid-column
아이템이 차지할 열(column)의 시작과 끝을 지정
```css
.item {
  grid-column: 1 / 3; /* 1번째 열에서 시작해서 3번째 열까지 차지 */
}
```
#### 줄여서 작성 가능
```css
grid-column: span 2; /* 현재 위치에서 2칸 차지! */
```
### grid-row
아이템이 차지할 행(row)의 시작과 끝을 지정
```css
.item {
  grid-row: 2 / 4; /* 2번째 행에서 시작해서 4번째 행까지 차지 */
}
```
### grid-area
한 번에 행과 열을 설정할 수 있음! `grid-template-areas`에서 사용될 이름을 지정
```css
.item {
  grid-area: 2 / 1 / 4 / 3; /* row-start / column-start / row-end / column-end */
}
```
```css
.header {
  grid-area: header;
}
```

### repeat(), minmax(), auto-fit, auto-fill
복잡한 그리드 설정을 더 쉽게 만드는 기능들!
#### repeat(n, 크기)
반복 그리드 생성
```css
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
} /* 1fr 크기의 열을 3개 자동 생성! */
```
#### minmax(최소, 최대)
```css
.container {
  display: grid;
  grid-template-columns: repeat(3, minmax(100px, 1fr));
} /* 열 크기가 최소 100px, 최대 1fr로 자동 조정됨! */
```
#### auto-fill
그리드 크기에 맞춰 최대한 많은 열 생성

#### auto-fit
아이템이 존재하는 열만 생성, 빈 공간 제거
```css
.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}
```