# Grid 템플릿 속기형

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

그리드 템플릿 행 / 열 / 영역 이름 설정을 속기형으로 설정 가능합니다.

| **속성**          | **값**                                                                                    |
| --------------- | ---------------------------------------------------------------------------------------- |
| `grid-template` | none                                                                                     |
|                 | \<grid-template-rows> / \<grid-temlate-columns>                                          |
|                 | \[\<line-names>? <**string**> \<track-size>? \<line-names>?] \[/ \<explict-track-list>]? |

**값**

* `none`: 3가지 설정을 모두 초기 값으로 적용
* `grid-template-rows` / `grid-template-columns`:  행/열 그리드 템플릿 설정
* 라인이름(옵션)   영역이름(필수)   트랙 크기(옵션)   라인이름(옵션)

**예시**

다음 예시는 그리드 행/열 템플릿을 속기형 속성으로 설정한 예입니다.

```css
.grid-container {
  grid-template: repeat(3, 100px) / repeat(2, 20px 40px) auto;
}
```

속기형으로 적용된 속성을 개별 속성으로 풀어보면 다음과 같습니다.

```css
.grid-container {
  grid-template-rows: repeat(3, 100px);
  grid-template-columns: repeat(2, 20px 40px);
  grid-template-areas: none;
}
```

그리고 다소 복잡해보이지만, 행/열 그리드 템플릿에 영역이름 템플릿을 함께 설정 할 수 있습니다.

```css
.grid-container {
  /* 2행 3열 그리드 
   * 1행 100px | 'header header header'
   * 2행 100px | 'footer footer footer'
   */
  grid-template:
    [row-1-start] "header header header" 100px [row-1-end]
    [row-2-start] "footer footer footer" 100px [row-2-end]
    / auto 200px auto;
}
```

속기형으로 적용된 속성을 개별 속성으로 풀어보면 다음과 같습니다.

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

{% hint style="info" %}
※ grid-template-areas 속성은 암시적인 그리드 속성을 초기화하지 않습니다.

* grid-auto-rows
* grid-auto-columns
* grid-auto-flow
{% endhint %}

## 실습 <a href="#practice" id="practice"></a>

{% embed url="https://codepen.io/yamoo9/pen/LmEweR" %}

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

`grid-template` 속성은 `grid-template-{rows,columns,areas}` 속성을 속기형으로 사용할 수 있도록 합니다.

![](https://3440753900-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LH1dN99ZXtZTFG_0JKV%2F-LH6mliKwHeDDdT1881n%2F-LH6n7k2KdnNHo_usfXM%2Fimage.png?alt=media\&token=662f6f3e-a924-4a12-a2c7-96285a1f35bf)

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