Grid 컨테이너

사용법

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

예시

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

실습

레퍼런스

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

CSS Grid Layout Module Level 1

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