CSS Types

CSS Types

Editing

〈grid〉

데브딕에서 지정한 색인용 자료 타입니다.

구문

  • <'grid-template'> | <'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>? | [ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'>
    CSS Grid Layout Module Level 2

사용되는 키워드

키워드요약
auto-flow

명시적으로 배치되지 않은 그리드 항목은 자동 배치 알고리즘에 의해 그리드 컨테이너의 비어 있는 공간에 자동으로 배치된다.

dense

그리드에서 dense(빽빽한, 조밀한) packing algorithm은 더 작은 항목이 나중에 올 경우 빈 공간을 먼저 채우려고 한다. 이로 인해 더 큰 항목이 좌측에 있는 빈 공간들을 채울 경우 항목들이 순서에 맞지 않게 나타나게 된다. 이러한 값을 생략하면 “spare(드문드문난, 듬성듬성한)” algorithm이 사용되는데 이 때 placement algorithm은 그리드 내에서 오직 앞으로만 이동하며 빈 공간을 채운다고 뒤로 돌아가지 않는다. 이로 인해 이후 항목으로 채워질 수있는 빈 공간이 생기더라도  모든 자동 배치되는 항목들은 순서대로 나타나게 된다. <번역 도움: 염조희>

버전 명세

Modules
Module NameStatusSummary
CSS Grid Layout Module Level 2후보 추천 초안

사용자 인터페이스 설계에 최적화된 2차원 그리드 기반 레이아웃 시스템을 정의한다.


Last review date: 2022-6-23

지원 웹브라우저