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