Properties

Properties

  • account_tree
  • bug_report

grid

그리드 레이아웃을 생성하는 세부 속성들을 한번에 작성하는 속기 속성이다.

설명

grid 속기 속성

grid 속기 속성은 다음 복잡한 형식 구문처럼 다양한 설정 방식을 갖는다.

<'grid-template'> | <'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>? | [ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'>

이것을 좀더 보기 편하게 나눈다면 아래와 같다.

grid: <'grid-template'>;
grid: <'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>?;
grid: [ auto-flow && dense? ] <'grid-auto-rows'> /  <'grid-template-columns'>;

 위 세 가지 작성 방식을 좀더 자세히 알아보도록 하자.

<'grid-template'>

grid: <'grid-template'>;

grid-templategrid-template-columns, grid-template-rows, grid-template-areas 속성 값들을 한번에 작성하여 적용하는 역시 속기 속성이다. 따라서 다음과 같이 몇 가지 구문 형식으로 작성이 될 수 있다.

더 자세한 내용은 grid-template 속성을 참고하면 된다.

<'grid-template-rows'> / <'grid-template-columns'>

grid: <'grid-template-rows'> / <'grid-template-columns'>;

<'grid-template-areas'>

grid: <'grid-template-areas'>;

<line-names>? <string>

grid: <line-names>? <string>;

<line-names>? <string> <track-size>

grid: <line-names>? <string> <track-size>;

<line-names>? <string> <track-size> / <explicit-track-list>

grid: <line-names>? <string> <track-size> / <explicit-track-list>;

<'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>

grid: <'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>;

/를 기준으로 우측에 작성된 값에서 auto-flow 키워드가 지정되면  grid-auto-columns 값으로 처리된다. 따라서 자동 배치 알고리즘에 따라 추가적인 column에게 지정된 column 설정값이 반복된다.

dense 키워드를 추가적으로 지정하면 빈 영역을 채우는 방식으로 자동 배치한다.

[ auto-flow && dense? ] <'grid-auto-rows'> / <'grid-template-columns'>

grid: [ auto-flow && dense? ] <'grid-auto-rows'> /  <'grid-template-columns'>;

/를 기준으로 좌측에 작성된 값에서 auto-flow 키워드가 지정되면  grid-auto-rows 값으로 처리된다. 따라서 자동 배치 알고리즘에 따라 추가적인 row에게 지정된 row 설정값이 반복된다.

dense 키워드를 추가적으로 지정하면 빈 영역을 채우는 방식으로 자동 배치한다.

사용 가능한 값 타입

<'grid'>

DEVDIC-Specified Data Types

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

  • CSS Grid Layout Module Level 2
    <'grid-template'> | <'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>? | [ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'>

포함된 타입

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

  • <'grid-auto-columns'>

    DEVDIC-Specified Data Types

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

    암시적로 배치되는 그리드 레이아웃 컬럼(column) 항목이 그리드 컨테이너 내에서 차지하는 값을 나타낸다.

    • CSS Grid Layout Module Level 2
      <track-size>+
    Details

    포함된 타입

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

            숫자와 단위를 사용하여 길이, 크기, 위치를 나타내는 자료형이며 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-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-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

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

      관련 함수

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

  • <'grid-auto-rows'>

    DEVDIC-Specified Data Types

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

    암시적로 배치되는 그리드 레이아웃 row 항목이 그리드 컨테이너 내에서 차지하는 값을 나타낸다.

    • CSS Grid Layout Module Level 2
      <track-size>+
    Details

    포함된 타입

    • <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>]
  • <'grid-template-areas'>

    DEVDIC-Specified Data Types

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

    레이아웃 항목에게 grid-area 속성으로 지정된 이름을 이용하거나 마침표를 이용해서 문자열 형식으로 레이아웃 항목들을 배치하는 값을 나타낸다.

    • CSS Grid Layout Module Level 2
      none | <string>+
    Details

    포함된 타입

    • <string>

      따옴표로 감싸진 데이터 유형을 표현한다.

      • "this is a 'string'."
      Details

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

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

      • font-family

        글꼴을 지정한다.

      • content

        가상 요소로 생성할 콘텐츠를 설정한다.

      • quotes

        인용 부호의 유형을 설정한다.

    사용되는 키워드

    • none

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

  • <'grid-template-columns'>

    DEVDIC-Specified Data Types

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

    열(column) 방향으로 그리드 항목들이 명시적으로 배치되는 값을 나타낸다.

    • CSS Grid Layout Module Level 2
      none | <track-list> | <auto-track-list> | subgrid <line-name-list>?
    Details

    포함된 타입

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

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

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

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

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

            • 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

          포함된 타입

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

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

        관련 함수

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

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

          관련 함수

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

        관련 함수

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

      • <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 키워드에 의해 설정되며 축 중 하나 또는 둘 모두에서 하위 그리드로 구성될 수 있다. 즉 상위 그리드에 제약이 된다.

      현재 파이어폭스와 사파리 웹브라우저 외에는 지원이 안된다.
  • <'grid-template-rows'>

    DEVDIC-Specified Data Types

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

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

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

    포함된 타입

    • <auto-track-list>

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

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

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

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

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

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

    사용되는 키워드

    • none

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

    • subgrid

      CSS Grid Layout Module Level 2

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

      현재 파이어폭스와 사파리 웹브라우저 외에는 지원이 안된다.
  • <'grid-template'>

    DEVDIC-Specified Data Types

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

    열(column), 행(row) 방향으로 레이아웃 항목들이 명시적으로 배치되는 값을 나타내며 grid-area 속성으로 지정된 이름 또는 마침표를 통해 배치되는 값을 나타내기도 한다.

    • CSS Grid Layout Module Level 2
      none | [ <'grid-template-rows'> / <'grid-template-columns'> ] | [ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]?
    Details

    포함된 타입

    • <explicit-track-list>

      명시적인 트랙 목록을 나타낸다.

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

      포함된 타입

      • <line-names>

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

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

            포함된 타입

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

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

    • <string>

      따옴표로 감싸진 데이터 유형을 표현한다.

      • "this is a 'string'."
      Details 기능이 없다면 사용되는 타입이 동일한 타입을 사용하는 다른 항목에서 설명하거나 없는 경우이다.
      타입에 대한 자세한 설명은 다음 링크를 참조하라.[<string>]
    • <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에 의해 생성될 수 있다.

사용되는 키워드

  • auto-flow

    명시적으로 배치되지 않은 그리드 항목은 자동 배치 알고리즘에 의해 그리드 컨테이너의 비어 있는 공간에 자동으로 배치된다. grid-column 또는 grid-row 속성에 의해 배치를 결정 짓는 것을 명시적 배치라 한다.

  • dense

    그리드에서 dense(빽빽한, 조밀한) packing algorithm은 더 작은 항목이 나중에 올 경우 빈 공간을 먼저 채우려고 한다. 이로 인해 더 큰 항목이 좌측에 있는 빈 공간들을 채울 경우 항목들이 순서에 맞지 않게 나타나게 된다. 이러한 값을 생략하면 “spare(드문드문난, 듬성듬성한)” algorithm이 사용되는데 이 때 placement algorithm은 그리드 내에서 오직 앞으로만 이동하며 빈 공간을 채운다고 뒤로 돌아가지 않는다. 이로 인해 이후 항목으로 채워질 수있는 빈 공간이 생기더라도  모든 자동 배치되는 항목들은 순서대로 나타나게 된다. <번역 도움: 염조희>

공통적으로 사용되는 값

다음 키워드는 속성에 따라 다른 의미를 가질 수도 있다. 값 사용에 대한 자세한 사항은 아래 값 항목을 참고하라.

  • none

    어떠한 값도 설정하지 않음을 나타낸다.

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

  • 〈'grid'〉none
    CSS Grid Layout Module Level 2

    그리드를 설정하지 않는다.

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

    명시적으로 배치되지 않은 그리드 항목은 자동 배치 알고리즘에 의해 그리드 컨테이너의 비어 있는 공간에 자동으로 배치된다. grid-column 또는 grid-row 속성에 의해 배치를 결정 짓는 것을 명시적 배치라 한다.

    Example

    총 7개의 그리드 레이아웃 항목 중 2번과 4번은 그리드 라인 설정을 통해 위치가 지정되었다. 2번은 grid-row-start2, grid-row-end4이다. 따라서 그리드 라인 두 개를 병합한 결과로 나와야 할 것이다. 4번 항목은 grid-row-start4이고 grid-row-end5이다. 2번 항목의 다음 row에 배치될 것이라 예상이 된다. 더군다나 grid 설정 값을 보면 column은 하나로 설정되어 있다.

    자동 배치 알고리즘은 grid-template-columns의 값을 따라 명시적으로 위치가 지정되지 않은 레이아웃 항목들을 최대한 원래의 콘텐츠 흐름에 맞추려고 한다. 이 샘플 코드에서는 2번 항목이 1번 다음에 나오는 것을 고려할 때 4번 항목이 2번 다음 아래에 나오도록 그리드 라인을 맞추면 3번 항목의 위치가 흐름에 맞지 않다고 판단한다. 그래서 auto-flow의 설정 방향이 column이므로 3번 항목을 2번 항목 아래에 배치하고 이다. 4번 항목은 grid-row-start4이고 grid-row-end5이므로 3번 항목의 오른쪽에, 즉 column 방향으로 흐름에 맞도록 배치한다.

    5, 6, 7번 레이아웃 항목은 명시적으로 위치를 지정하지 않았으므로 auto-flow 배치 알고리즘에 따라 오른쪽 column 방향의 공간을 활용하여 4번 오른쪽에 배치한다. 이렇게 자동 배치를 하다보면 어쩔수 없이 빈 공간이 생기게 된다.

  • CSS Grid Layout Module Level 2

    그리드에서 dense(빽빽한, 조밀한) packing algorithm은 더 작은 항목이 나중에 올 경우 빈 공간을 먼저 채우려고 한다. 이로 인해 더 큰 항목이 좌측에 있는 빈 공간들을 채울 경우 항목들이 순서에 맞지 않게 나타나게 된다. 이러한 값을 생략하면 “spare(드문드문난, 듬성듬성한)” algorithm이 사용되는데 이 때 placement algorithm은 그리드 내에서 오직 앞으로만 이동하며 빈 공간을 채운다고 뒤로 돌아가지 않는다. 이로 인해 이후 항목으로 채워질 수있는 빈 공간이 생기더라도  모든 자동 배치되는 항목들은 순서대로 나타나게 된다. <번역 도움: 염조희>

    Example

    columm 방향으로 auto-flow가 설정이 되어 있고 2, 4번 레이아웃 항목은 명시적으로 위치를 설정했다. 그리고 나머지 레이아웃 항목들은 자동 배치 알고리즘에 따라 위치가 정해졌다. 추가적으로 dense를 설정하면 자동 배치로 인해 생기는 빈 공간을 최소한으로 해서 배치한다.

  • CSS Grid Layout Module Level 2

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

    Example

    'Hello' 텍스트 콘텐츠를 가진 두 번째 레이아웃 항목의 column 크기가 50%로 지정이 되었으나 max-content의 크기(실제 콘텐츠의 크기)가 더 작으므로 같은 크기를 같는 첫 번째 레이아웃 항목보다 더 작게 처리된다.

  • CSS Grid Layout Module Level 2

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

    특정 column 또는 row를 최소 크기와 최대 크기로 지정한다.

    Example
  • CSS Grid Layout Module Level 2

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

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

    fr 단위가 사용되지 않는 조건에서 사용된다.

  • CSS Grid Layout Module Level 2

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

    fr 단위가 사용되지 않는 조건에서 사용된다.

    Example
  • CSS Grid Layout Module Level 2

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

    fr 단위가 사용되지 않는 조건에서 사용된다.

    Example
  • CSS Grid Layout Module Level 2

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

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

  • CSS Grid Layout Module Level 2

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

    Example
  • CSS Grid Layout Module Level 2

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

    Example
  • CSS Box Sizing Module Level 3,CSS1.0,CSS2.1

    UA(유저 에이전트)가 자동으로 설정한다. inline-level 수준의 요소이면 가지고 있는 콘텐츠만큼 너비를 가지며 block-level 수준이면 기본적으로 상위 요소의 크기에 상대적으로 100%의 너비를 갖는다. 높이 값을 auto로 지정하면 inline-level 수준의 요소는 높이를 가질 수 없으며 block-level 수준의 요소는 가지고 있는 콘텐츠만큼 높이가 형성된다.

    min-width/min-height의 경우에는 자동 최소 크기를 지정하는데 0으로 해석된다.

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

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

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

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

    Example
  • CSS Grid Layout Module Level 2

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

    Example
  • CSS Grid Layout Module Level 2

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

    Example
  • CSS Grid Layout Module Level 2

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

    Example

    <track-size> 타입의 값을 반복한다.

  • CSS Grid Layout Module Level 2

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

    repeat( [  | auto-fill ], +)
    Example

    grid-template-columns 값이 auto3번 반복 생성이 있으니 총 4개의 column이 생성이 된다.

    grid: auto / auto repeat(3, [a] 1fr [b]);

    위 코드를 보면 repeat() 함수에 [a] 1fr [b]라는 인수가 지정되었다. 이것이 line name을 기반으로 반복하는 것을 의미한다. [a][b]는 line name을 의미한다. 이렇게 반복으로 정의된 line name은 지정된 그리드 항목에 grid-column 속성 값으로 사용한다.

    실제로 repeat() 함수에 의해서 생성되는 값은 다음과 같다.

    [a] 1fr [b a] 1fr [b a] 1fr [b]

    3번째 그리드 항목에게 grid-column: a / a 3 값을 지정했는데 arepeat() 함수에서 정의한 line name이다. grid-column-start 값이 a이고 grid-column-end 값은 a3을 더한 라인 번호를 의미한다.

    4번째 그리드 항목에게 grid-column: b / b 3 값을 지정했는데 b는 역시 repeat() 함수에서 정의한 line name이다. grid-column-start 값이 b이고 grid-column-end 값은 b3을 더한 라인 번호를 의미한다.

    결과적으로 [ b a]라는 중복 영역이 생성되므로 4번째 그리드 항목은 다음 행으로 내려 배치된다.

  • CSS Grid Layout Module Level 2

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

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

    subgrid 값을 갖는 레이아웃 항목에게 사용한다.

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

  • CSS Grid Layout Module Level 2

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

    Example

    그리드 레이아웃 항목에게 display 속성을 grid로 지정했으며 상위 그리드의 row 축 설정을 따르도록 grid-template-rows 속성을 subgrid로 설정했다. 이렇게 하면 상위 그리드의 row에 제약이 되며 일부처럼 처리된다. 따라서 subgrid를 갖는 경우에는 grid-row 속성 설정시 자신의 row까지 포함하여 설정이 되어야 한다. 코드에서는 다음과 같이 설정했다.

    grid-row: 1 / 4;

    이 설정으로 기대되는 것은 마치 테이블의 콘텐츠처럼 정렬선을 맞출 수 있다.

    현재 파이어폭스 웹브라우저에서만 지원이 되며 다음과 같은 결과를 만든다.

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

구문

  • grid: none;
    CSS3

    그리드를 설정하지 않는다.

  • grid: <'grid-template-rows'> / <'grid-template-columns'>;
    CSS Grid Layout Module Level 2

    column과 row의 크기를 명시적으로 지정한다. 명시적으로 지정되지 않은 추가적인 row는 grid-auto-rows 속성의 암시적인 값(기본값은 auto)을 갖는다.

    열과 행을 값을 auto로 지정하는 경우

    auto 값은 grid-auto-rows, grid-auto-columnsgrid-template-rows, grid-template-columns에서 모두 사용이 가능하며 grid-auto-rows, grid-auto-columns 속성에서는 기본 값으로 사용된다. auto 값은 기본적으로 레이아웃 항목의 최대 콘텐츠 기여도를 나타내지만 배치 알고리즘에 의해서 다른 레이아웃 항목들의 크기 설정 방식과 콘텐츠 크기에 따라 최소 콘텐츠 기여도, 최소 기여도 값을 가질 수도 있다.

    이 예제는 grid-template-columns 속성의 값으로 모든 column에 auto 값을 지정했다. grid-template-rows 속성의 값으로도 첫 번째 row에 한해서 auto 값을 사용했다. 추가적으로 생성되는 row는 grid-auto-rows 속성의 값(기본 값은 auto)을 가지며 추가된 row의 column 크기는 기본적으로 첫 번째 row의 column 설정 값을 따른다.


    비율과 함수를 이용하는 경우

    fr은 상대 단위이며 그리드 컨테이너 내에서 다른 레이아웃 항목에 상대적으로 차지하는 비율을 지정한다. row를 명시적으로 1fr 2fr 1fr로 설정하게 되면 row가 추가적으로 생성이 될 때 차례대로 1:2:1 비율의 상대적인 크기(높이)를 갖는다. 이후에 더 추가되는 행이 있다면 grid-auto-rows 속성의 값으로 처리되며 기본 값으로 auto로 처리된다.

    minmax() 함수는 최소값과 최대값을 인수로 지정하는 방식으로 크기를 갖는다. 예제에서는 grid-template-columns 값을 auto minmax(350px, auto)로 지정했는데 첫 번째 column은 auto 키워드로 크기를 갖게 되고 두 번째 column은 최소 350px, 최대 auto를 갖게 되어 콘텐츠가 없더라도 350px 아래로 줄지 않으며 최대값은 자동으로 지정된다.


    레이아웃 항목이 최소 크기를 유지하며 레이아웃 영역에서 위치를 잡는 경우

    grid-template-rows 속성을 auto로 설정했으므로 추가적으로 생기는 row를 포함해서 콘텐츠 크기만큼 높이가 설정된다. grid-template-columns 속성 값은 repeat() 함수를 이용해서 반복하는 방식으로 생성하며 반복 횟수를 auto-fill키워드로 지정하므로 인해 그리드 컨테이너의 크기 내에 두 번째 인수로 지정된 최소 100px, 최대 150px의 크기로 채워지는 방식으로 column을 생성한다.

    만약에 그리드 컨테이너가 cloumn 축으로 레이아웃 항목의 최소값을 기준으로 배치할 공간이 부족하면 다음 row으로 내려간다. 반대로 공간이 남는 경우는 최대값을 유지하고 빈 공간을 그대로 둔다.


    레이아웃 영역에 채우는 방식으로 항목이 정렬되는 경우

    grid-template-rows 속성을 auto로 설정했으므로 추가적으로 생기는 row를 포함해서 콘텐츠 크기만큼 높이가 설정된다. grid-template-columns 속성 값은 repeat() 함수를 이용해서 반복하는 방식으로 생성하며 반복 횟수를 auto-fit키워드로 지정하므로 인해 그리드 컨테이너의 크기 내에 두 번째 인수로 지정된 최소 100px, 최대 1fr의 크기로 채워지는 방식으로 column을 생성한다. auto-fitauto-fill과 비슷해 보이지만 최대값으로 fr 단위를 사용하게 되면 차이가 나타난다.

    그리드 컨테이너가 cloumn 축으로 레이아웃 항목의 최소값을 기준으로 배치할 공간이 부족하면 다음 row으로 내려가는 것은 auto-fill과 같지만 반대로 공간이 남는 경우는 최대값 1fr을 사용해서 그리드 컨테이너를 채워준다.

  • grid: <'grid-template-areas'>;
    CSS Grid Layout Module Level 2

    grid-area 속성에 의해 설정된 레이아웃 항목의 이름을 나열하여 그리드 레이아웃을 만든다. column 또는 row 중 하나의 방향으로 같은 이름이 연속되어 지정되면 영역이 합쳐지는 효과를 만든다.

    이름이 아닌 마침표(.)로 지정하는 경우 grid-area 값을 사용하여 설정하지 않은 레이아웃 항목이 있다면 자동 배치 알고리즘에 따라 column 또는 row 생성에 영향을 준다. 만약에 자동 배치 알고리즘에 따라 레이아웃 항목의 위치가 모두 지정된 상태라면 남은 마침표(.) 설정 값은 빈 column 또는 빈 row를 생성하게 된다.

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

    위 코드에서 item1은 레이아웃 항목에 지정한 grid-area 속성의 값(이하 '이름')이다. 이름을 공백으로 구분하여 문자열로 작성하며 해당 이름을 가진 레이아웃 항목들이 배치된다. 만약에 같은 이름을 연속해서 작성하면 연속된 column(또는 row) 영역이 합쳐지는 결과를 만든다.

    .(마침표)를 공백으로 구분해서 작성하는 경우에는 .(마침표) 수 만큼 나머지 레이아웃 항목들이 grid-auto-columns 속성 값(기본값은 auto)에 의해 column에 배치된다.  다음 row가 생성될 경우에도 마찬가지로 처리된다.

  • grid: <'grid-template-area'> / <'grid-template-columns'>;
    grid-template-areas 설정으로 그리드 레이아웃 처리 예제
    .grid-wrapper {
        grid: 
            "item1 item1 ." 100px
            "item2 . item3"
            "item4 item5 ." / minmax(100px, 0.7fr) auto 100px;
    }

    각각의 그리드 항목에 grid-area 속성값을  설정하고 위 코드처럼 각 레이아웃 항목의 grid-area  속성값을 문자열로 나열하는 방식으로 그리드 레이아웃을 만들 수 있다. /를 기준으로 왼쪽은 grid-template-area 속성값을 나타내고 오른쪽은 grid-template-columns 속성값을 나타낸다.

    grid-template-areas 설정은 각각의 그리드 항목에 지정한 grid-area 속성값으로 원하는 대로 문자열로 작성한다. 원하는 column 수 만큼 공백으로 구분해서 레이아웃 항목의 grid-area 속성값을 나열한다.

    column 축으로 레이아웃 항목의 영역을 확장하고자 한다면 원하는 column 수 만큼 동일한 grid-area 속성값을 공백으로 구분해서 작성해 주면 된다. 추가적으로 다음 row에 대한 설정이 필요하면 같은 방법으로 설정해 준다. 중요한 것은 각 row의 column의 수가 동일해야 한다.

    각 row에 대한 높이 설정이 필요하면 문자열 옆에 높이를 명시적으로 지정할 수도 있다. 지정하지 않으면 auto로 처리된다.

    /를 기준으로 오른쪽에 grid-template-columns 속성값을 선택적으로 지정하며 지정하지 않으면 각 column의 크기는 auto로 처리된다.  

    .(마침표)로 작성된 column은 배치가 가능한 레이아웃 항목이 남아 있다면 해당 위치에 배치되며 그렇지 않다면 빈 영역으로 처리된다.

버전 명세

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

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


Last review date: 2022-6-23

지원 웹브라우저