> 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/grid-container.md).

# Grid 컨테이너

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

[그리드 컨테이너](/css-grid/css-grid-term.md#grid)는 `display` 속성을 사용해 설정할 수 있습니다.  설정 값에 따라 블록(Block) 그리드와 인라인(Inline) 그리드로 설정됩니다. 그리드 컨테이너 요소를 블록 또는 인라인 요소처럼 처리합니다.

**예시**

```css
.grid-container {
  display: grid; /* grid 또는 inline-grid 설정 가능 */
}
```

![](/files/-LH669NYRrm0txx-UKvT)

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

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

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

그리드 컨테이너는 **그리드 시스템 영역을 구축** 합니다. 내부에 포함된 자식 요소는 그리드 아이템이 됩니다. `overflow` 속성은 그리드 컨테이너 적용 가능합니다. 하지만 `float`, `clear` , `vertical-align` 속성은 그리드 아이템에 영향을 주지 않습니. 뿐만 아니라 `::first-letter`, `::first-line` 모두 적용되지 않습니다.

![](/files/-LH66L54MeSde_6DSBPN)

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