> 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/css-grid-guide/template-areas.md).

# Grid 템플릿 영역

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

`grid-area` 속성으로 설정된 그리드 영역의 이름을 참조하여, 그리드 템플릿 영역을 설정할 수 있습니다. 그리드 영역 \
이름을 반복하면 그리드 셀을 병합(merge, `span`) 합니다. 그리고 마침표(`.`)는 비어있는 그리드 셀을 말합니다.

| **속성**                | **값**             |
| --------------------- | ----------------- |
| `grid-template-areas` | \<grid-area-name> |
|                       | .                 |
|                       | none              |

**값**

* `<grid-area-name>`: 사용자가 `grid-area` 속성 값으로 설정한 임의의 그리드 영역 이름
* 마침표(`.`): 비어있는 그리드 셀
* `none`: 그리드 영역으로 정의되지 않은 셀

**예시**

다음은 3행 4열 그리드 템플릿 영역 설정 예시입니다.

```css
.grid-container {
  grid-template-rows: repeat(3, 300px);
  grid-template-columns: repeat(4, 1fr);

  /**
   * 그리드 템플릿 영역 설정
   * 각 행은 동일한 개수의 열 설정이 요구됩니다.
   */
  grid-template-areas:
    "header header header header"  /* 1행: 4열 모두 header                */
    "main main . sidebar"          /* 2행: 2열 main 1열, 공백 1열, sidebar */
    "footer footer footer footer"; /* 3행: 4열 모두 header                */
}

/* 그리드 영역 이름 설정 */
.grid-header  { grid-area: 'header';  }
.grid-main    { grid-area: 'main';    }
.grid-sidebar { grid-area: 'sidebar'; }
.grid-footer  { grid-area: 'footer';  }
```

![](https://3440753900-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LH1dN99ZXtZTFG_0JKV%2F-LH6KJ_xsyVjM2gIx102%2F-LH6L_jJdObYjDq5Xc67%2Fimage.png?alt=media\&token=35559743-4a84-41a0-b4ab-ca1b5e84fa98)

그리드 템플릿 영역 설정은 그리드 라인 설정이 아니라, 영역을 설정하는 것입니다. 영역을 설정하면 그리드 라인 이름이 자동으로 설정됩니다. `grid-area`로 설정된 이름을 사용하여 각 행/열의 시작은 `-start`, 끝은 `-end`로 이름이 설정됩니다. 예를 들면 다음과 같습니다.

```python
[header-start]                               [header-end]
[main-start]  [main-end ] . [sidebar-start]  [sidebar-end]
[footer-start]                               [footer-end]
```

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

{% embed url="<https://codepen.io/yamoo9/pen/vjEEwj>" %}

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

명시적으로 그리드를 정의할 때, 그리드 컨테이너에 3개의 속성을 사용해 설정할 수 있습니다.

* [`grid-template-rows`](/css-grid/css-grid-guide/template-rows-columns.md)
* [`grid-template-columns`](/css-grid/css-grid-guide/template-rows-columns.md)
* `grid-template-areas`

![](https://3440753900-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LH1dN99ZXtZTFG_0JKV%2F-LH6iYADxfsqAv0T-DDc%2F-LH6ig99N7JvVLgpNSlL%2Fimage.png?alt=media\&token=a85c5c26-1dae-4d6c-9642-e0f8ef860d26)

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