Grid 아이템

사용법

그리드 컨테이너 내부에 포함한 자식요소는 그리드 아이템으로 설정됩니다. (자식 요소가 아니면 그리드 아이템이 아닙니다) 그리드 아이템에 설정된 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>

https://www.w3.org/TR/css-grid-1/examples/grid-item-determination.html

grid-item-determination 예제

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

그리드 아이템에 설정된 display 속성은 모두 무시됩니다.

실습

레퍼런스

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

CSS Grid Layout Module Level 1

w3.org/TR/css-grid-1/#grid-items