# Grid 아이템

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

그리드 컨테이너 내부에 포함한 자식요소는 그리드 아이템으로 설정됩니다. (자식 요소가 아니면 그리드 아이템이 아닙니다) 그리드 아이템에 설정된 `float` 속성은 적용되지 않습니다. 텍스트 콘텐츠를 컨테이너 포함하는 경우에는 암시적으로 그리드 아이템이 됩니다.

**예시**

```markup
<div class="grid-container" style="display: grid">

  <!-- block 그리드 아이템 -->
  <div class="grid-item"> block </div>

  <!-- float 속성 설정 무시 -->
  <div class="grid-item" style="float: left"> float </div>

  <!-- 암시적으로 블록 그리드 아이템 생성 -->
  anonymous item 3

  <!-- inline 그리드 아이템 ⟹ display:block 처리 -->
  <span>
    item 4
    <!-- 그리드 아이템이 아님 -->
    <q style="display: block" id=not-an-item> item 4 </q>
    item 4
  </span>
  
</div>
```

![](https://3440753900-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LH1dN99ZXtZTFG_0JKV%2F-LH68lAMQd3Y_F9Uk3ec%2F-LH6AJAlHEcrEoWnb0KL%2Fimage.png?alt=media\&token=5def6951-7721-44b3-9925-350ca9fb319e)

{% embed url="<https://www.w3.org/TR/css-grid-1/examples/grid-item-determination.html>" %}
grid-item-determination 예제
{% endembed %}

{% hint style="info" %}
그리드 아이템 사이 공백이 사라집니다. 요소가 아닌 텍스트가 자식으로 포함된 경우, 암시적인 그리드 아이템이 됩니다. 하지만 암시적으로 생성된 그리드 아이템은 스타일 규칙을 설정할 수 없습니다. 다만 상속 가능한 스타일은 적용됩니다.
{% endhint %}

{% hint style="warning" %}
그리드 아이템에 설정된 display 속성은 모두 무시됩니다.
{% endhint %}

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

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

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

느슨하게 말하면 그리드 아이템은 그리드 컨테이너 내부에 표시되는 플로우 콘텐츠 입니다. 그리드 컨테이너가 포함하는 자식 콘텐츠는 모두 그리드 아이템이 되며, 요소가 아닌 텍스트일 경우 암시적으로 그리드 아이템이 생성됩니다.

![](https://3440753900-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LH1dN99ZXtZTFG_0JKV%2F-LH68lAMQd3Y_F9Uk3ec%2F-LH6ERYAMb8SAHbKg8gF%2Fimage.png?alt=media\&token=57ee69ee-47f9-40c0-bf53-ac474cc91fd5)

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