Properties

Properties

Editing
  • account_tree
  • bug_report

grid-area

그리드 레이아웃에서 각각의 레이아웃 항목의 위치 지정에 관련된 세부 속성을 한번에 작성하는 속기 속성이다.

설명

grid-area 속성은 그리드 항목 배치에 직접 영향을 주는 위치를 <integer>로 지정하거나 grid-template-areas 속성에서 사용할 수 있도록 그리드 항목의 식별 값 <custom-ident>를 설정하기도 한다.

다음은 그리드 항목 배치에 영향을 주는 그리드 컨테이너에서의 가상의 그리드 항목의 위치를 숫자로 표시한 것이다.

그리드 라인 번호

사용 가능한 값 타입

<'grid-area'>

DEVDIC-Specified Data Types

grid-area 속성에 사용되는 타입이다.

  • CSS Grid Layout Module Level 2
    <grid-line> [ / <grid-line> ]{0,3}

포함된 타입

아래 유형에서 지원하는 모든 키워드와 단위를 사용하지 않을 수도 있다.

  • <grid-line>

    그리드를 구성하는 행(row)과 열(column)의 시작과 끝을 지정하여 항목의 크기를 결정하는 값을 나타낸다. 또한 span 키워드로 행과 열의 범위를 병합하는 값을 나타낸다.

    • auto | <custom-ident> | [ <integer> && <custom-ident>? ] | [ span && [ <integer> || <custom-ident> ] ]
    Details

    포함된 타입

    • <custom-ident>

      임의의 사용자 정의 문자열을 나타낸다.

      Details

      동일한 타입을 사용하는 관련 속성

      모든 속성을 표시하지 않을 수도 있다.

      • animation-name

        애니메이션으로 사용할 미리 정의된 키프레임 셋의 이름을 설정한다.

      • grid-column-end

        그리드 항목이 몇 개의 열(column)로 확장되는지 또는 항목이 끝나는 열(column)의 줄의 위치를 정의한다.

      • grid-column-start

        그리드 항목이 시작되는 열(column)의 줄의 위치를 정의한다.

      • grid-row-end

        그리드 항목이 몇 개의 행(row)으로 확장되는지 또는 그리드 항목이 끝나는 행(row)의 위치를 정의한다.

      • grid-row-start

        그리드 항목이 시작될 행(row)의 위치를 정의한다.

      • counter-increment

        하나 이상의 CSS 카운터 값을 늘리거나 줄인다.

      • counter-reset

        하나 이상의 CSS 카운터를 만들거나 재설정한다.

      • list-style-type

        목록의 마커의 모양을 설정한다.

    • <integer>

      <number-token> 유형 플래그가 'integer'인 소숫점이 없는 정수를 표현한다.

      • [HYPHEN-MINUS]?[0-9]

        0에서 9까지의 숫자로 구성된다. 선택적으로 음수 기호(U+002D HYPHEN-MINUS)가 앞에 올 수 있다.

      Details

      포함된 타입

      • <number-token>

        Number Token Railroad Diagrams

        + - digit . digit digit . digit e E + - digit

    사용되는 키워드

    • auto

      그리드 항목 배치에 아무런 영향을 주지 않으며 자동 배치를 나타낸다.

    • span

      그리드 항목 영역의 해당 가장자리가 반대쪽 가장자리에서 n줄이 되도록 그리드 항목의 배치에 그리드 범위를 지정한다.

다음은 필요에 따라 일부 값을 설명하므로 표시되지 않는 값은 값 유형을 참조하라.

  • 〈grid-line〉auto
    CSS Grid Layout Module Level 2

    그리드 항목 배치에 아무런 영향을 주지 않으며 자동 배치를 나타낸다.

  • CSS Grid Layout Module Level 2

    그리드 항목 영역의 해당 가장자리가 반대쪽 가장자리에서 n줄이 되도록 그리드 항목의 배치에 그리드 범위를 지정한다.

    Example

구문

  • grid-area: <'grid-row-start'> / <'grid-column-start'> / <'grid-row-end'> / <'grid-column-end'>;
    CSS Grid Layout Module Level 2

    라인 번호를 설정하는 각 세부 속성 값을 /로 구분하여 작성한다.

    〈'grid-row-start'〉 / 〈'grid-column-start'〉 / 〈'grid-row-end'〉 / 〈'grid-column-end'〉 설정으로 그리드 레이아웃 처리 예제
  • grid-area: <custom-ident>;
    CSS Grid Layout Module Level 2

    특정 그리드 레이아웃 항목에게 grid-area 속성값을 지정하여 grid-template-areas 속성에서 출력 항목으로 column(또는 row)을 묶을 수 있다.

    grid-template-areas 설정으로 그리드 레이아웃 처리 예제

버전 명세

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

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


Last review date: 2022-6-23

지원 웹브라우저