그리드 컨테이너 내부에 포함한 자식요소는 그리드 아이템으로 설정됩니다. (자식 요소가 아니면 그리드 아이템이 아닙니다) 그리드 아이템에 설정된 float 속성은 적용되지 않습니다. 텍스트 콘텐츠를 컨테이너 포함하는 경우에는 암시적으로 그리드 아이템이 됩니다.
<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>
그리드 아이템에 설정된 display 속성은 모두 무시됩니다.
느슨하게 말하면 그리드 아이템은 그리드 컨테이너 내부에 표시되는 플로우 콘텐츠 입니다. 그리드 컨테이너가 포함하는 자식 콘텐츠는 모두 그리드 아이템이 되며, 요소가 아닌 텍스트일 경우 암시적으로 그리드 아이템이 생성됩니다.
