그리드 항목이 몇 개의 열(column)로 확장되는지 또는 항목이 끝나는 열(column)의 줄의 위치를 정의한다.
그리드를 구성하는 행(row)과 열(column)의 시작과 끝을 지정하여 항목의 크기를 결정하는 값을 나타낸다. 또한 span
키워드로 행과 열의 범위를 병합하는 값을 나타낸다.
auto | <custom-ident> | [ <integer> && <custom-ident>? ] | [ span && [ <integer> || <custom-ident> ] ]
아래 유형에서 지원하는 모든 키워드와 단위를 사용하지 않을 수도 있다.
임의의 사용자 정의 문자열을 나타낸다.
모든 속성을 표시하지 않을 수도 있다.
애니메이션으로 사용할 미리 정의된 키프레임 셋의 이름을 설정한다.
그리드 항목이 시작되는 열(column)의 줄의 위치를 정의한다.
그리드 항목이 몇 개의 행(row)으로 확장되는지 또는 그리드 항목이 끝나는 행(row)의 위치를 정의한다.
그리드 항목이 시작될 행(row)의 위치를 정의한다.
하나 이상의 CSS 카운터 값을 늘리거나 줄인다.
하나 이상의 CSS 카운터를 만들거나 재설정한다.
목록의 마커의 모양을 설정한다.
<number-token>
유형 플래그가 'integer
'인 소숫점이 없는 정수를 표현한다.
[HYPHEN-MINUS]?[0-9]
0에서 9까지의 숫자로 구성된다. 선택적으로 음수 기호(U+002D HYPHEN-MINUS)가 앞에 올 수 있다.
그리드 항목 배치에 아무런 영향을 주지 않으며 자동 배치를 나타낸다.
그리드 항목 영역의 해당 가장자리가 반대쪽 가장자리에서 n줄이 되도록 그리드 항목의 배치에 그리드 범위를 지정한다.
다음은 필요에 따라 일부 값을 설명하므로 표시되지 않는 값은 값 유형을 참조하라.
그리드 항목 배치에 아무런 영향을 주지 않으며 자동 배치를 나타낸다.
그리드 항목 영역의 해당 가장자리가 반대쪽 가장자리에서 n줄이 되도록 그리드 항목의 배치에 그리드 범위를 지정한다.
grid-column-end: 3;
element.style.gridColumnEnd = 3;
Modules | ||
---|---|---|
Module Name | Status | Summary |
CSS Grid Layout Module Level 2 | 후보 추천 초안 | 사용자 인터페이스 설계에 최적화된 2차원 그리드 기반 레이아웃 시스템을 정의한다. Last review date: 2022-6-23 |