Properties

Properties

Editing
  • account_tree
  • bug_report

grid-row

그리드 컨테이너 내에서 그리드 항목의 위치를 지정하는 grid-row-startgrid-row-end 속성에 대한 속기 속성이다.

설명

그리드 라인 번호

사용 가능한 값 타입

<'grid-row'>

DEVDIC-Specified Data Types

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

  • CSS Grid Layout Module Level 2
    <grid-line> [ / <grid-line> ]?
    grid-row 축약 속성으로 특정 항목의 위치를 지정

포함된 타입

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

  • <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-row: <'grid-row-start'> / <'grid-row-end'>;
    CSS3
    grid-row 축약 속성으로 특정 항목의 위치를 지정
  • element.style.gridRow = "2 / 4";
    CSS Grid Layout Module Level 2

버전 명세

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

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


Last review date: 2022-6-23

지원 웹브라우저