# Grid 속기형 속성

## 사용법 <a href="#usage" id="usage"></a>

하나의 속성에 다음 속성들을 모두 일괄 설정할 수 있는 `grid` 속기형 속성입니다.

* grid-template-rows
* grid-template-columns
* grid-template-areas
* grid-auto-rows
* grid-auto-columns
* grid-auto-flow

| **속성** | **값**                                                            |
| ------ | ---------------------------------------------------------------- |
| grid   | none                                                             |
|        | \<grid-template-rows> / \<grid-template-columns>                 |
|        | \<grid-auto-flow> \[\<grid-auto-rows> \[/ \<grid-auto-columns>]] |

**값**

| **값**                                                            | **설명**                                                             |
| ---------------------------------------------------------------- | ------------------------------------------------------------------ |
| none                                                             | 모든 속성을 초기 값으로 적용                                                   |
| \<grid-template-rows> / \<grid-template-columns>                 | <p>grid-tempate-rows<br>grid-template-columns 속성 설정</p>            |
| \<grid-auto-flow> \[\<grid-auto-rows> \[/ \<grid-auto-columns>]] | <p>grid-auto-flow<br>grid-auto-rows<br>grid-auto-columns 속성 설정</p> |

**예시**

2행 3열 그리드 설정입니다.

```css
.grid-container {
  grid-template-rows: 200px auto;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas: none;
}
```

위 설정을 grid 속기형 속성으로 작성하면 다음과 같습니다.

```css
.grid-container {
  grid: 200px auto / 1fr auto 1fr;
}
```

column 자동 배치 알고리즘 설정에 암시적인 행/열 크기 설정입니다.

```css
.grid-container {
  grid-auto-flow: column;
  grid-auto-rows: 1fr;
  grid-auto-columns: auto;
}
```

위 설정을 속기형으로 작성하면 다음과 같습니다.

```css
.grid-container {
  grid: column 1fr / auto;
}
```

좀 더 복잡하지만 다음 속성을 모두 포함하는 속기형 작성을 사용하면 보다 편리합니다.

* [grid-template-rows](https://github.com/yamoo9/CSS-Grid#4-2-%EA%B7%B8%EB%A6%AC%EB%93%9C-%ED%96%89%EC%97%B4-%ED%85%9C%ED%94%8C%EB%A6%BF-%EC%84%A4%EC%A0%95)
* [grid-template-columns](https://github.com/yamoo9/CSS-Grid#4-2-%EA%B7%B8%EB%A6%AC%EB%93%9C-%ED%96%89%EC%97%B4-%ED%85%9C%ED%94%8C%EB%A6%BF-%EC%84%A4%EC%A0%95)
* [grid-template-areas](https://github.com/yamoo9/CSS-Grid#4-3-%EA%B7%B8%EB%A6%AC%EB%93%9C-%ED%85%9C%ED%94%8C%EB%A6%BF-%EC%98%81%EC%97%AD-%EC%84%A4%EC%A0%95)

설정되지 않은 다른 속성은 기본 값으로 설정됩니다.

```css
.grid-container {
  grid:
    [row-1-start] "header header header" 1fr [row-1-end]
    [row-2-start] "footer footer footer" 60px [row-2-end]
    / auto 100px auto;
}
```

```css
.grid-container {
  grid-template-rows: [row-1-start] 1fr [row-1-end row-2-start] 60px [row-2-end];
  grid-template-columns: auto 100px auto;
  grid-template-areas:
    "header header header"
    "footer footer footer";
}
```

## 레퍼런스 <a href="#reference" id="reference"></a>

![](https://3440753900-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LH1dN99ZXtZTFG_0JKV%2F-LHW5tRppv4Pu-LG5-k2%2F-LHWAF436yCNQFrl1Vdb%2Fimage.png?alt=media\&token=6daf34f6-cae5-4913-9abe-f0de41bf3ef9)

{% embed url="<https://www.w3.org/TR/css-grid-1/#propdef-grid>" %}
w3.org/TR/css-grid-1/#propdef-grid
{% endembed %}