# 영역 기반

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

`grid-area` 속성에 다음 유형을 사용하여 아이템을 배치시킬 수 있습니다.

| **속성**      | **값(공통)**                                                       |
| ----------- | --------------------------------------------------------------- |
| `grid-area` | `<name>`                                                        |
|             | `<row-start>` / `<column-start>` / `<row-end>` / `<column-end>` |

**값**

| **값**                                                                                                                      | **설명**                         |
| -------------------------------------------------------------------------------------------------------------------------- | ------------------------------ |
| `<name>`                                                                                                                   | grid-template-areas에 등록된 참조 이름 |
| <p><code>\<row-start></code> / <code>\<column-start></code> / <br><code>\<row-end></code> / <code>\<column-end></code></p> | 그리드라인 번호 또는 참조 이름              |

**예시**

`grid-area` 속성 값으로 [grid-template-areas](https://yamoo9.gitbook.io/css-grid/css-grid-guide/template-areas)에 사용된 참조 이름을 사용할 수 있습니다.

```css
.item-d {
  grid-area: header;
}
```

[grid-row-start / grid-column-start / grid-row-end / grid-column-end](https://yamoo9.gitbook.io/css-grid/css-grid-guide/grid-items-layout/grid-line) 순으로 속성 값을 설정할 수도 있습니다.

```css
.item-d {
  grid-area: 1 / col4-start / last-line / 6;
}
```

![](https://3440753900-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LH1dN99ZXtZTFG_0JKV%2F-LH7WvyMGArohSuVH9B8%2F-LH7YcwHUrOVeDwo-U_2%2Fimage.png?alt=media\&token=431fa654-89fa-4077-b15d-18cce8325bb7)

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

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

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

![](https://3440753900-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LH1dN99ZXtZTFG_0JKV%2F-LH7WvyMGArohSuVH9B8%2F-LH7Z7iCxxsikPx9nvnp%2Fimage.png?alt=media\&token=c919c338-3c49-40d7-91a6-638d0c463b9a)

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