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>