Properties

Properties

Editing
  • account_tree
  • bug_report

grid-template-rows

그리드 레이이웃에서 행(row)의 수와 높이를 명시적으로 지정한다.

설명

값은 공백으로 구분된 목록이며 각 값은 각 행(row)의 높이로 지정된다. 명시된 행(row)외에 해당하는 그리드 항목은 grid-auto-rows 속성값에 의해서 생성된다.

암시적과 명시적의 의미

그리드 레이아웃에서는 '암시적'과 '명시적'이라는 용어가 사용된다. 사실 일반적인 의미와 다를 게 없다. 그리드 레이아웃에서 그리드 항목의 갯수는 확정적이지 않을 수 있다. 즉 동적 콘텐츠를 보여주는 목록 UI가 있다고 가정할 경우 동적 콘텐츠의 수는 정해지지 않은 것이다. 이 목록 UI를 그리드 레이아웃에 의해 출력을 하려고 한다면 향후 생성될 그리드 항목에도 패턴에 따라 일관성 있는 크기를 가져야 할 것이다. 그러나 반드시 그렇지 않을 수도 있다. 몇몇 그리드 항목들은 패턴과는 무관하게 독립적으로 크기를 정해줘야 할 경우도 생길 수 있다. 

그리드 레이아웃에서 자동으로 생성(또는 기본값)되는 그리드 항목에 영향을 미치는 것을 '암시적'이라는 개념으로 'auto' 키워드를 사용한다. 반대로 독립적인 크기를 갖는 그리드 항목에 영향을 미치는 것을 '명시적'이라는 개념으로 'template' 키워드를 사용한다. 속성의 이름에 각각의 키워드가 포함된 속성들이 바로 암식적인 처리와 명시적인 처리를 하는 속성이라고 볼 수 있다.

명시적인 처리를 하는 속성이 적용되어 있다 하더라도 처리 대상외는 모두 암시적인 처리에 영향을 받는다. 암시적인 처리에 사용되는 속성은 값이 명시되지 않았더라도 기본 값을 가지고 있다. 따라서 명시적인 영향을 받는 것이 아닌 그리드 항목들은 별도의 설정이 없이도 모두 암시적인 영향을 받는다. 암시적인 설정은 다양한 패턴으로 반복되게 할 수도 있다.

모든 행(row)과 열(column)이 유기적인 그리드 레이아웃 특성상 열(column)에 명시적인 설정 값이 있다면 나머지 행(row)에 있는 열(column)에도 영향을 미친다.

사용 가능한 값 타입

<'grid-template-rows'>

DEVDIC-Specified Data Types

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

행(row) 방향으로 레이아웃 항목들이 명시적으로 배치되는 값을 나타낸다.

  • none | <track-list> | <auto-track-list> | subgrid <line-name-list>?

포함된 타입

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

  • <auto-track-list>

    그리드 컨테이너의 크기에 따라 트랙(track)의 수가 자동으로 지정되는 메커니즘을 나타낸다.

    • CSS Grid Layout Module Level 2
      [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>? <auto-repeat>
    Details

    포함된 타입

    • <auto-repeat>

      가변 크기의 그리드 컨테이너에 반복적으로 그리드 항목을 배치하는 경우 그리드 컨테이너의 공간을 채우는 메커니즘을 나타낸다.

      • CSS Grid Layout Module Level 2
        repeat( [ auto-fill | auto-fit ] , [ <line-names>? <fixed-size> ]+ <line-names>? )
      Details

      포함된 타입

      • <fixed-size>

        고정된 그리드 트랙(grid track) 크기를 나타낸다.

        • CSS Grid Layout Module Level 2
          <fixed-breadth> | minmax( <fixed-breadth> , <track-breadth> ) | minmax( <inflexible-breadth> , <fixed-breadth> )
        Details

        포함된 타입

        • <fixed-breadth>

          그리드 트랙(grid track)의 고정폭을 나타낸다.

          • CSS Grid Layout Module Level 2
            <length-percentage>
          Details

          포함된 타입

          • <length-percentage>

            <length><percentage> 타입을 나타낸다.

            • CSS Values and Units Module Level 3
              <length> | <percentage>
            Details

            포함된 타입

            • <length>

              숫자와 단위를 사용하여 길이, 크기, 위치를 나타내는 자료형이며 CSS에서 가장 자주 사용한다.

              • CSS Basic User Interface Module Level 4
                <length>
              Details

              사용되는 단위

              아래의 모든 단위를 사용할 수 있는지 확인해야 할 수도 있다.

              • cm

                1cm(센티미터)는 96px를 2.54로 나눈 값을 나타낸다.

              • in

                1in(인치)는 2.54cm, 96px과 동일한 값을 나타낸다.

              • mm

                1cm의 1/10 값을 나타낸다.

              • pc

                1in의 1/16 값을 나타낸다.

              • pt

                1in의 1/72 값을 나타낸다.

              • px

                스크린의 기본 단위이다. 1in의 1/96 값을 나타낸다.

              • Q

                1cm의 1/40을 나타낸다.

              • deg

                보통 1도라고 불리는 단위를 말하며 360deg가 완전한 원을 만든다.

              • grad

                400grad(그라디안)은 완전한 원을 만든다.

              • rad

                2π(라디안)이 완전한 원을 만든다.

              • turn

                1turn(턴)이 완전한 원을 만든다.

              • cap

                대상 요소의 폰트의 대문자 높이를 상대 단위의 기준으로 사용한다.

              • ch

                글꼴 크기에 대한 0(ZERO, U+0030) 문자의 너비를 상대적인 기준으로 하는 단위이다.

              • em

                대상 요소의 폰트 크기를 상대 단위의 기준으로 사용한다.

              • ex

                대상 요소의 폰트의 x-height를 상대 기준으로 사용한다.

              • ic

                한국, 중국, 일본 문자(CJK)의 일반적인 어드밴스 메저(advance measure)를 나타낸다. 상대적인 기준이 되는 값은  표의 문자 '水'의 너비 또는 높이이다.

              • lh

                요소의 line-height 속성의 값을 상대 단위의 기준으로 사용한다.

              • rem

                html 요소(:root)의 폰트 크기를 상대 기준으로 사용한다.

              • rlh

                html 요소(:root)의 line-height 속성 값을 상대 단위의 기준으로 사용한다.

              • Hz

                1초당 발생한 진동수를 나타낸다.

              • kHz

                1000Hz를 나타낸다.

              • fr

                그리드 컨테이너 내에서 남은 공간에 대한 차지하는 비율 값을 나타낸다.

              • vb

                html 요소의 블록축 방향으로 뷰포트 길이의 1%를 나타낸다.

              • vh

                뷰포트 높이를 상대적으로 1% 높이를 갖는다.

              • vi

                html 요소의 인라인 축 방향으로 뷰포트 길이의 1%를 나타낸다.

              • vmax

                vw 또는 vh 중 큰 값을 나타낸다.

              • vmin

                vw 또는 vh 중 작은 값을 나타낸다.

              • vw

                뷰포트 너비를 상대적으로 1% 폭을 갖는다.

              • dpcm

                1cm당 점(dot)의 수를 나타낸다.

              • dpi

                1in당 점(dot)의 수를 나타낸다.

              • dppx

                1픽셀(pixel)당 점(dot)의 수를 나타낸다.

              • ms

                1초를 1000으로 나눈 밀리초(milliseconds)를 나타낸다.

              • s

                초를 나타낸다.

            • <percentage>

              어떠한 기준으로 부터 백분율로 표현한다.

        • <inflexible-breadth>

          유연하지 않은(inflexible) 의미를 가진 이름에서 알 듯이 <track-breadth> 타입에서 fr 단위가 제외되었다.

          • CSS Grid Layout Module Level 2
            <length-percentage> | min-content | max-content | auto
          Details

          포함된 타입

          • <length-percentage>

            <length><percentage> 타입을 나타낸다.

            • CSS Values and Units Module Level 3
              <length> | <percentage>
            Details 기능이 없다면 사용되는 타입이 동일한 타입을 사용하는 다른 항목에서 설명하거나 없는 경우이다.
            타입에 대한 자세한 설명은 다음 링크를 참조하라.[<length-percentage>]

          사용되는 키워드

          • auto

            CSS Grid Layout Module Level 2

            최대값일 경우 그리드 트랙을 차지하는 그리드 항목의 최대 콘텐츠 기여도를 나타낸다. max-content와 달리 align-contentjustify-content 속성으로 트랙을 확장할 수 있다.

            최소값의 경우 그리드 트랙을 차지하는 그리드 항목의 최대 최소 크기(min-width / min-height)를 나타낸다.

          • max-content

            CSS Grid Layout Module Level 2

            그리드 컨테이너의 공간이 넉넉한 경우에 해당 축에서 콘텐츠를 담기 위한 이상적인 크기를 나타낸다.

          • min-content

            CSS Grid Layout Module Level 2

            콘텐츠가 넘치지 않고 담길 수 있는 가장 작은 크기를 나타낸다.

        • <track-breadth>

          <length-percentage>fr 단위를 사용한 <flex> 값으로 지정된 트랙(track) 폭에 대한 값을 나타낸다. min-content, max-content, auto 키워드를 사용해 트랙(track) 폭의 크기를 지정할 수도 있다.

          • CSS Grid Layout Module Level 2
            <length-percentage> | <flex> | min-content | max-content | auto
          Details

          포함된 타입

          • <flex>

            그리드 트랙(grid track)의 플렉스 펙터(flex factor)를 지정하는 음수가 아닌 fr 단위의 치수를 나타낸다.

            Details

            포함된 타입

            • <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

            사용되는 단위

            아래의 모든 단위를 사용할 수 있는지 확인해야 할 수도 있다.

            • fr

              그리드 컨테이너 내에서 남은 공간에 대한 차지하는 비율 값을 나타낸다.

          • <length-percentage>

            <length><percentage> 타입을 나타낸다.

            • CSS Values and Units Module Level 3
              <length> | <percentage>
            Details

            포함된 타입

            • <length>

              숫자와 단위를 사용하여 길이, 크기, 위치를 나타내는 자료형이며 CSS에서 가장 자주 사용한다.

              • CSS Basic User Interface Module Level 4
                <length>
              Details 기능이 없다면 사용되는 타입이 동일한 타입을 사용하는 다른 항목에서 설명하거나 없는 경우이다.
              타입에 대한 자세한 설명은 다음 링크를 참조하라.[<length>]
            • <percentage>

              어떠한 기준으로 부터 백분율로 표현한다.

              Details 기능이 없다면 사용되는 타입이 동일한 타입을 사용하는 다른 항목에서 설명하거나 없는 경우이다.
              타입에 대한 자세한 설명은 다음 링크를 참조하라.[<percentage>]

          사용되는 키워드

          • auto

            CSS Grid Layout Module Level 2

            최대값일 경우 그리드 트랙을 차지하는 그리드 항목의 최대 콘텐츠 기여도를 나타낸다. max-content와 달리 align-contentjustify-content 속성으로 트랙을 확장할 수 있다.

            최소값의 경우 그리드 트랙을 차지하는 그리드 항목의 최대 최소 크기(min-width / min-height)를 나타낸다.

          • max-content

            CSS Grid Layout Module Level 2

            그리드 컨테이너의 공간이 넉넉한 경우에 해당 축에서 콘텐츠를 담기 위한 이상적인 크기를 나타낸다.

          • min-content

            CSS Grid Layout Module Level 2

            콘텐츠가 넘치지 않고 담길 수 있는 가장 작은 크기를 나타낸다.

        관련 함수

        모든 함수를 표시하지 않을 수도 있다.

      • <line-names>

        그리드 레이아웃(grid layout)에서 그리드 라인(grid line)에 지정한 이름을 나타낸다. CSS에서 사용하는 키워드는 이름으로 사용할 수 없다.

        • CSS Grid Layout Module Level 2
          '[' <custom-ident>* ']'
          Example
        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

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

      사용되는 키워드

      • auto-fill

        CSS Grid Layout Module Level 2

        독립형 그리드 축에서는 허용된 그리드 트랙 영역 내에서 그리드 컨테이너를 오버플로우(overflow) 하지 않는 최대 양의 정수만큼 반복한다. 트랙 내에서 그리드 레이아웃 항목수 보다 큰 값으로 반복이 된다면 남은 트랙 공간을 채우도록 빈 column 또는 row를 생성한다. 반대로 공간이 부족하면 다음 트랙을 생성해 역시 그리드 컨테이너를 오버플로우(overflow) 하지 않는 최대 양의 정수만큼 반복한다.

        하위 그리드 축에서 <line-name-list>당 한번만 유효하며 이름 목록이 하위 그리드의 지정된 그리드 범위와 일치하도록 충분한 횟수를 반복한다.

      • auto-fit

        CSS Grid Layout Module Level 2

        그리드 항목 배치 후 빈 반복 트랙이 축소된다는 점을 제외하고는 autl-fill과 동일하다. 빈 트랙은 인플로우(in-flow) 그리드 항목이 배치되거나 가로질러 있지 않은 트랙이다.

      관련 함수

      모든 함수를 표시하지 않을 수도 있다.

    • <fixed-repeat>

      그리드 트랙(grid track) 생성을 위해 <fixed-size>로 반복되는 값을 나타낸다.

      • CSS Grid Layout Module Level 2
        repeat( [ <integer [1,∞]> ] , [ <line-names>? <fixed-size> ]+ <line-names>? )
      Details

      포함된 타입

      • <fixed-size>

        고정된 그리드 트랙(grid track) 크기를 나타낸다.

        • CSS Grid Layout Module Level 2
          <fixed-breadth> | minmax( <fixed-breadth> , <track-breadth> ) | minmax( <inflexible-breadth> , <fixed-breadth> )
        Details 기능이 없다면 사용되는 타입이 동일한 타입을 사용하는 다른 항목에서 설명하거나 없는 경우이다.
        타입에 대한 자세한 설명은 다음 링크를 참조하라.[<fixed-size>]
      • <integer>

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

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

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

        Details 기능이 없다면 사용되는 타입이 동일한 타입을 사용하는 다른 항목에서 설명하거나 없는 경우이다.
        타입에 대한 자세한 설명은 다음 링크를 참조하라.[<integer>]
      • <line-names>

        그리드 레이아웃(grid layout)에서 그리드 라인(grid line)에 지정한 이름을 나타낸다. CSS에서 사용하는 키워드는 이름으로 사용할 수 없다.

        • CSS Grid Layout Module Level 2
          '[' <custom-ident>* ']'
          Example
        Details 기능이 없다면 사용되는 타입이 동일한 타입을 사용하는 다른 항목에서 설명하거나 없는 경우이다.
        타입에 대한 자세한 설명은 다음 링크를 참조하라.[<line-names>]

      관련 함수

      모든 함수를 표시하지 않을 수도 있다.

    • <fixed-size>

      고정된 그리드 트랙(grid track) 크기를 나타낸다.

      • CSS Grid Layout Module Level 2
        <fixed-breadth> | minmax( <fixed-breadth> , <track-breadth> ) | minmax( <inflexible-breadth> , <fixed-breadth> )
      Details

      포함된 타입

      • <fixed-breadth>

        그리드 트랙(grid track)의 고정폭을 나타낸다.

        • CSS Grid Layout Module Level 2
          <length-percentage>
        Details 기능이 없다면 사용되는 타입이 동일한 타입을 사용하는 다른 항목에서 설명하거나 없는 경우이다.
        타입에 대한 자세한 설명은 다음 링크를 참조하라.[<fixed-breadth>]
      • <inflexible-breadth>

        유연하지 않은(inflexible) 의미를 가진 이름에서 알 듯이 <track-breadth> 타입에서 fr 단위가 제외되었다.

        • CSS Grid Layout Module Level 2
          <length-percentage> | min-content | max-content | auto
        Details 기능이 없다면 사용되는 타입이 동일한 타입을 사용하는 다른 항목에서 설명하거나 없는 경우이다.
        타입에 대한 자세한 설명은 다음 링크를 참조하라.[<inflexible-breadth>]
      • <track-breadth>

        <length-percentage>fr 단위를 사용한 <flex> 값으로 지정된 트랙(track) 폭에 대한 값을 나타낸다. min-content, max-content, auto 키워드를 사용해 트랙(track) 폭의 크기를 지정할 수도 있다.

        • CSS Grid Layout Module Level 2
          <length-percentage> | <flex> | min-content | max-content | auto
        Details 기능이 없다면 사용되는 타입이 동일한 타입을 사용하는 다른 항목에서 설명하거나 없는 경우이다.
        타입에 대한 자세한 설명은 다음 링크를 참조하라.[<track-breadth>]

      관련 함수

      모든 함수를 표시하지 않을 수도 있다.

    • <line-names>

      그리드 레이아웃(grid layout)에서 그리드 라인(grid line)에 지정한 이름을 나타낸다. CSS에서 사용하는 키워드는 이름으로 사용할 수 없다.

      • CSS Grid Layout Module Level 2
        '[' <custom-ident>* ']'
        Example
      Details

      포함된 타입

      • <custom-ident>

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

        Details 기능이 없다면 사용되는 타입이 동일한 타입을 사용하는 다른 항목에서 설명하거나 없는 경우이다.
        타입에 대한 자세한 설명은 다음 링크를 참조하라.[<custom-ident>]
  • <line-name-list>

    하나 이상의 <line-names>이거나 <name-repeat>를 나타낸다.

    • CSS Grid Layout Module Level 2
      [ <line-names> | <name-repeat> ]+
    Details

    포함된 타입

    • <line-names>

      그리드 레이아웃(grid layout)에서 그리드 라인(grid line)에 지정한 이름을 나타낸다. CSS에서 사용하는 키워드는 이름으로 사용할 수 없다.

      • CSS Grid Layout Module Level 2
        '[' <custom-ident>* ']'
        Example
      Details 기능이 없다면 사용되는 타입이 동일한 타입을 사용하는 다른 항목에서 설명하거나 없는 경우이다.
      타입에 대한 자세한 설명은 다음 링크를 참조하라.[<line-names>]
    • <name-repeat>

      그리드 레이아웃(grid layout)에서 그리드 라인(grid line)에 이름을 지정하여 repeat() 함수를 사용해서 반복 작업으로 그리드 트랙(grid-track)을 생성하는 값을 나타낸다.

      • CSS Grid Layout Module Level 2
        repeat( [ <integer [1,∞]| auto-fill ], <line-names>+)
        Example
      Details

      포함된 타입

      • <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
          Details 기능이 없다면 사용되는 타입이 동일한 타입을 사용하는 다른 항목에서 설명하거나 없는 경우이다.
          타입에 대한 자세한 설명은 다음 링크를 참조하라.[<number-token>]
      • <line-names>

        그리드 레이아웃(grid layout)에서 그리드 라인(grid line)에 지정한 이름을 나타낸다. CSS에서 사용하는 키워드는 이름으로 사용할 수 없다.

        • CSS Grid Layout Module Level 2
          '[' <custom-ident>* ']'
          Example
        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

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

      사용되는 키워드

      • auto-fill

        CSS Grid Layout Module Level 2

        독립형 그리드 축에서는 허용된 그리드 트랙 영역 내에서 그리드 컨테이너를 오버플로우(overflow) 하지 않는 최대 양의 정수만큼 반복한다. 트랙 내에서 그리드 레이아웃 항목수 보다 큰 값으로 반복이 된다면 남은 트랙 공간을 채우도록 빈 column 또는 row를 생성한다. 반대로 공간이 부족하면 다음 트랙을 생성해 역시 그리드 컨테이너를 오버플로우(overflow) 하지 않는 최대 양의 정수만큼 반복한다.

        하위 그리드 축에서 <line-name-list>당 한번만 유효하며 이름 목록이 하위 그리드의 지정된 그리드 범위와 일치하도록 충분한 횟수를 반복한다.

      관련 함수

      모든 함수를 표시하지 않을 수도 있다.

  • <track-list>

    하나 이상의 트랙(track) 크기가 명시된 목록을 나타낸다.

    • CSS Grid Layout Module Level 2
      [ <line-names>? [ <track-size> | <track-repeat> ] ]+ <line-names>?
    Details

    포함된 타입

    • <line-names>

      그리드 레이아웃(grid layout)에서 그리드 라인(grid line)에 지정한 이름을 나타낸다. CSS에서 사용하는 키워드는 이름으로 사용할 수 없다.

      • CSS Grid Layout Module Level 2
        '[' <custom-ident>* ']'
        Example
      Details 기능이 없다면 사용되는 타입이 동일한 타입을 사용하는 다른 항목에서 설명하거나 없는 경우이다.
      타입에 대한 자세한 설명은 다음 링크를 참조하라.[<line-names>]
    • <track-repeat>

      repeat() 함수를 사용하여 생성한 크기가 고정되지 않은 트랙(track) 집합을 나타낸다.

      • CSS Grid Layout Module Level 2
        repeat( [ <integer [1,∞]> ] , [ <line-names>? <track-size> ]+ <line-names>? )
      Details

      포함된 타입

      • <integer>

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

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

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

        Details 기능이 없다면 사용되는 타입이 동일한 타입을 사용하는 다른 항목에서 설명하거나 없는 경우이다.
        타입에 대한 자세한 설명은 다음 링크를 참조하라.[<integer>]
      • <line-names>

        그리드 레이아웃(grid layout)에서 그리드 라인(grid line)에 지정한 이름을 나타낸다. CSS에서 사용하는 키워드는 이름으로 사용할 수 없다.

        • CSS Grid Layout Module Level 2
          '[' <custom-ident>* ']'
          Example
        Details

        포함된 타입

        • <custom-ident>

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

          Details 기능이 없다면 사용되는 타입이 동일한 타입을 사용하는 다른 항목에서 설명하거나 없는 경우이다.
          타입에 대한 자세한 설명은 다음 링크를 참조하라.[<custom-ident>]
      • <track-size>

        하위 타입인 <track-breadth>를 포함하여 minmax(), fit-content() 함수를 사용하여 지정한 트랙(track)의 크기를 나타낸다.

        • CSS Grid Layout Module Level 2
          <track-breadth> | minmax( <inflexible-breadth> , <track-breadth> ) | fit-content( <length-percentage> )
        Details

        포함된 타입

        • <inflexible-breadth>

          유연하지 않은(inflexible) 의미를 가진 이름에서 알 듯이 <track-breadth> 타입에서 fr 단위가 제외되었다.

          • CSS Grid Layout Module Level 2
            <length-percentage> | min-content | max-content | auto
          Details

          포함된 타입

          • <length-percentage>

            <length><percentage> 타입을 나타낸다.

            • CSS Values and Units Module Level 3
              <length> | <percentage>
            Details 기능이 없다면 사용되는 타입이 동일한 타입을 사용하는 다른 항목에서 설명하거나 없는 경우이다.
            타입에 대한 자세한 설명은 다음 링크를 참조하라.[<length-percentage>]

          사용되는 키워드

          • auto

            CSS Grid Layout Module Level 2

            최대값일 경우 그리드 트랙을 차지하는 그리드 항목의 최대 콘텐츠 기여도를 나타낸다. max-content와 달리 align-contentjustify-content 속성으로 트랙을 확장할 수 있다.

            최소값의 경우 그리드 트랙을 차지하는 그리드 항목의 최대 최소 크기(min-width / min-height)를 나타낸다.

          • max-content

            CSS Grid Layout Module Level 2

            그리드 컨테이너의 공간이 넉넉한 경우에 해당 축에서 콘텐츠를 담기 위한 이상적인 크기를 나타낸다.

          • min-content

            CSS Grid Layout Module Level 2

            콘텐츠가 넘치지 않고 담길 수 있는 가장 작은 크기를 나타낸다.

        • <track-breadth>

          <length-percentage>fr 단위를 사용한 <flex> 값으로 지정된 트랙(track) 폭에 대한 값을 나타낸다. min-content, max-content, auto 키워드를 사용해 트랙(track) 폭의 크기를 지정할 수도 있다.

          • CSS Grid Layout Module Level 2
            <length-percentage> | <flex> | min-content | max-content | auto
          Details

          포함된 타입

          • <flex>

            그리드 트랙(grid track)의 플렉스 펙터(flex factor)를 지정하는 음수가 아닌 fr 단위의 치수를 나타낸다.

            Details 기능이 없다면 사용되는 타입이 동일한 타입을 사용하는 다른 항목에서 설명하거나 없는 경우이다.
            타입에 대한 자세한 설명은 다음 링크를 참조하라.[<flex>]
          • <length-percentage>

            <length><percentage> 타입을 나타낸다.

            • CSS Values and Units Module Level 3
              <length> | <percentage>
            Details

            포함된 타입

            • <length>

              숫자와 단위를 사용하여 길이, 크기, 위치를 나타내는 자료형이며 CSS에서 가장 자주 사용한다.

              • CSS Basic User Interface Module Level 4
                <length>
              Details

              사용되는 단위

              아래의 모든 단위를 사용할 수 있는지 확인해야 할 수도 있다.

              • cm

                1cm(센티미터)는 96px를 2.54로 나눈 값을 나타낸다.

              • in

                1in(인치)는 2.54cm, 96px과 동일한 값을 나타낸다.

              • mm

                1cm의 1/10 값을 나타낸다.

              • pc

                1in의 1/16 값을 나타낸다.

              • pt

                1in의 1/72 값을 나타낸다.

              • px

                스크린의 기본 단위이다. 1in의 1/96 값을 나타낸다.

              • Q

                1cm의 1/40을 나타낸다.

              • deg

                보통 1도라고 불리는 단위를 말하며 360deg가 완전한 원을 만든다.

              • grad

                400grad(그라디안)은 완전한 원을 만든다.

              • rad

                2π(라디안)이 완전한 원을 만든다.

              • turn

                1turn(턴)이 완전한 원을 만든다.

              • cap

                대상 요소의 폰트의 대문자 높이를 상대 단위의 기준으로 사용한다.

              • ch

                글꼴 크기에 대한 0(ZERO, U+0030) 문자의 너비를 상대적인 기준으로 하는 단위이다.

              • em

                대상 요소의 폰트 크기를 상대 단위의 기준으로 사용한다.

              • ex

                대상 요소의 폰트의 x-height를 상대 기준으로 사용한다.

              • ic

                한국, 중국, 일본 문자(CJK)의 일반적인 어드밴스 메저(advance measure)를 나타낸다. 상대적인 기준이 되는 값은  표의 문자 '水'의 너비 또는 높이이다.

              • lh

                요소의 line-height 속성의 값을 상대 단위의 기준으로 사용한다.

              • rem

                html 요소(:root)의 폰트 크기를 상대 기준으로 사용한다.

              • rlh

                html 요소(:root)의 line-height 속성 값을 상대 단위의 기준으로 사용한다.

              • Hz

                1초당 발생한 진동수를 나타낸다.

              • kHz

                1000Hz를 나타낸다.

              • fr

                그리드 컨테이너 내에서 남은 공간에 대한 차지하는 비율 값을 나타낸다.

              • vb

                html 요소의 블록축 방향으로 뷰포트 길이의 1%를 나타낸다.

              • vh

                뷰포트 높이를 상대적으로 1% 높이를 갖는다.

              • vi

                html 요소의 인라인 축 방향으로 뷰포트 길이의 1%를 나타낸다.

              • vmax

                vw 또는 vh 중 큰 값을 나타낸다.

              • vmin

                vw 또는 vh 중 작은 값을 나타낸다.

              • vw

                뷰포트 너비를 상대적으로 1% 폭을 갖는다.

              • dpcm

                1cm당 점(dot)의 수를 나타낸다.

              • dpi

                1in당 점(dot)의 수를 나타낸다.

              • dppx

                1픽셀(pixel)당 점(dot)의 수를 나타낸다.

              • ms

                1초를 1000으로 나눈 밀리초(milliseconds)를 나타낸다.

              • s

                초를 나타낸다.

            • <percentage>

              어떠한 기준으로 부터 백분율로 표현한다.

          사용되는 키워드

          • auto

            CSS Grid Layout Module Level 2

            최대값일 경우 그리드 트랙을 차지하는 그리드 항목의 최대 콘텐츠 기여도를 나타낸다. max-content와 달리 align-contentjustify-content 속성으로 트랙을 확장할 수 있다.

            최소값의 경우 그리드 트랙을 차지하는 그리드 항목의 최대 최소 크기(min-width / min-height)를 나타낸다.

          • max-content

            CSS Grid Layout Module Level 2

            그리드 컨테이너의 공간이 넉넉한 경우에 해당 축에서 콘텐츠를 담기 위한 이상적인 크기를 나타낸다.

          • min-content

            CSS Grid Layout Module Level 2

            콘텐츠가 넘치지 않고 담길 수 있는 가장 작은 크기를 나타낸다.

        관련 함수

        모든 함수를 표시하지 않을 수도 있다.

      관련 함수

      모든 함수를 표시하지 않을 수도 있다.

    • <track-size>

      하위 타입인 <track-breadth>를 포함하여 minmax(), fit-content() 함수를 사용하여 지정한 트랙(track)의 크기를 나타낸다.

      • CSS Grid Layout Module Level 2
        <track-breadth> | minmax( <inflexible-breadth> , <track-breadth> ) | fit-content( <length-percentage> )
      Details 기능이 없다면 사용되는 타입이 동일한 타입을 사용하는 다른 항목에서 설명하거나 없는 경우이다.
      타입에 대한 자세한 설명은 다음 링크를 참조하라.[<track-size>]

사용되는 키워드

  • none

    명시적 그리드 트랙이 이 속성에 의해 생성되지 않음을 나타낸다. 그러나 명시적 그리드 트랙은 여전히 grid-template-columns 또는 grid-template-rows에 의해 생성될 수 있다.

  • subgrid

    CSS Grid Layout Module Level 2

    하위 그리드는 grid-template-rows 또는 grid-template-columnssubgrid 키워드에 의해 설정되며 축 중 하나 또는 둘 모두에서 하위 그리드로 구성될 수 있다. 즉 상위 그리드에 제약이 된다.

    현재 파이어폭스와 사파리 웹브라우저 외에는 지원이 안된다.

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

  • CSS Grid Layout Module Level 2

    명시적 그리드 트랙이 이 속성에 의해 생성되지 않음을 나타낸다. 그러나 명시적 그리드 트랙은 여전히 grid-template-columns 또는 grid-template-rows에 의해 생성될 수 있다.

  • CSS Grid Layout Module Level 2

    최소값과 최대값을 한번에 지정한다. 따라서 이 값을 갖는 속성은 최소값과 최대값 사이에서 100% 값으로 처리된다.

    Example
  • CSS Grid Layout Module Level 2

    하위 그리드는 grid-template-rows 또는 grid-template-columnssubgrid 키워드에 의해 설정되며 축 중 하나 또는 둘 모두에서 하위 그리드로 구성될 수 있다. 즉 상위 그리드에 제약이 된다.

  • CSS Grid Layout Module Level 2

    독립형 그리드 축에서는 허용된 그리드 트랙 영역 내에서 그리드 컨테이너를 오버플로우(overflow) 하지 않는 최대 양의 정수만큼 반복한다. 트랙 내에서 그리드 레이아웃 항목수 보다 큰 값으로 반복이 된다면 남은 트랙 공간을 채우도록 빈 column 또는 row를 생성한다. 반대로 공간이 부족하면 다음 트랙을 생성해 역시 그리드 컨테이너를 오버플로우(overflow) 하지 않는 최대 양의 정수만큼 반복한다.

    하위 그리드 축에서 <line-name-list>당 한번만 유효하며 이름 목록이 하위 그리드의 지정된 그리드 범위와 일치하도록 충분한 횟수를 반복한다.

    Example
  • CSS Grid Layout Module Level 2

    그리드 항목 배치 후 빈 반복 트랙이 축소된다는 점을 제외하고는 autl-fill과 동일하다. 빈 트랙은 인플로우(in-flow) 그리드 항목이 배치되거나 가로질러 있지 않은 트랙이다.

    Example
  • CSS Grid Layout Module Level 1

    그리드 레이아웃에서 트랙내 반복되는 그리드 항목의 지정된 횟수와 패턴에 따라 반복적인 배치를 한다.

  • CSS Grid Layout Module Level 2

    최대값일 경우 그리드 트랙을 차지하는 그리드 항목의 최대 콘텐츠 기여도를 나타낸다. max-content와 달리 align-contentjustify-content 속성으로 트랙을 확장할 수 있다.

    최소값의 경우 그리드 트랙을 차지하는 그리드 항목의 최대 최소 크기(min-width / min-height)를 나타낸다.

    fr 단위를 사용하지 않는 조건에서 사용된다.

  • CSS Grid Layout Module Level 2

    그리드 컨테이너의 공간이 넉넉한 경우에 해당 축에서 콘텐츠를 담기 위한 이상적인 크기를 나타낸다.

    fr 단위를 사용하지 않는 조건에서 사용된다.

  • CSS Grid Layout Module Level 2

    콘텐츠가 넘치지 않고 담길 수 있는 가장 작은 크기를 나타낸다.

    fr 단위를 사용하지 않는 조건에서 사용된다.

  • CSS Grid Layout Module Level 1

    그리드 레이아웃에서 트랙내 반복되는 그리드 항목의 지정된 횟수와 패턴에 따라 반복적인 배치를 한다.

  • CSS Grid Layout Module Level 2

    최대값일 경우 그리드 트랙을 차지하는 그리드 항목의 최대 콘텐츠 기여도를 나타낸다. max-content와 달리 align-contentjustify-content 속성으로 트랙을 확장할 수 있다.

    최소값의 경우 그리드 트랙을 차지하는 그리드 항목의 최대 최소 크기(min-width / min-height)를 나타낸다.

  • CSS Grid Layout Module Level 2

    그리드 컨테이너의 공간이 넉넉한 경우에 해당 축에서 콘텐츠를 담기 위한 이상적인 크기를 나타낸다.

  • CSS Grid Layout Module Level 2

    콘텐츠가 넘치지 않고 담길 수 있는 가장 작은 크기를 나타낸다.

  • CSS Grid Layout Module Level 2

    독립형 그리드 축에서는 허용된 그리드 트랙 영역 내에서 그리드 컨테이너를 오버플로우(overflow) 하지 않는 최대 양의 정수만큼 반복한다. 트랙 내에서 그리드 레이아웃 항목수 보다 큰 값으로 반복이 된다면 남은 트랙 공간을 채우도록 빈 column 또는 row를 생성한다. 반대로 공간이 부족하면 다음 트랙을 생성해 역시 그리드 컨테이너를 오버플로우(overflow) 하지 않는 최대 양의 정수만큼 반복한다.

    하위 그리드 축에서 <line-name-list>당 한번만 유효하며 이름 목록이 하위 그리드의 지정된 그리드 범위와 일치하도록 충분한 횟수를 반복한다.

  • CSS Grid Layout Module Level 1

    그리드 레이아웃에서 트랙내 반복되는 그리드 항목의 지정된 횟수와 패턴에 따라 반복적인 배치를 한다.

  • CSS Box Sizing Module Level 3CSS Grid Layout Module Level 1

    인수(argument)로 전달된 값은 minmax(auto, max-content)minmax(auto, argument) 중 더 작은 값으로 계산된다.

  • CSS Grid Layout Module Level 2

    최소값과 최대값을 한번에 지정한다. 따라서 이 값을 갖는 속성은 최소값과 최대값 사이에서 100% 값으로 처리된다.

    Example
  • CSS Grid Layout Module Level 2

    그리드 레이아웃에서 트랙내 반복되는 그리드 항목의 지정된 횟수와 패턴에 따라 반복적인 배치를 한다.

    Example

구문

  • grid-template-rows: auto 100px;
    CSS Grid Layout Module Level 2
    3개의 행을 각각 auto, 고정 높이로 설정

버전 명세

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

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


Last review date: 2022-6-23

지원 웹브라우저