Properties

Properties

Editing
  • account_tree
  • bug_report

grid-template

grid-template-rows, grid-template-columns, grid-template-areas 속성을 한번에 정의하는 축약성 속성이다.

설명

명시적으로 항목의 크기를 지정할 때 사용한다.

사용 가능한 값 타입

〈'grid-template'〉

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

사용되는 키워드

  • none

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

사용되는 타입

아래 유형에서 지원하는 모든 키워드와 단위를 사용하지 않을 수도 있다. 값 사용에 대한 자세한 사항은 아래 값 항목을 참고하라.

  • 〈explicit-track-list〉

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

    • '[' <custom-ident>* ']'
      CSS Grid Layout Module Level 2
  • 〈string〉

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

    • "this is a 'string'."
  • 〈track-size〉

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

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

  • 〈'grid-template'〉noneCSS3

    명시적인 그리드가 없는 암시적인 그리드를 생성한다.

구문

  • 〈'grid-template-rows'〉 / 〈'grid-template_columns'〉CSS Grid Layout Module Level 2
    grid-template-rows / grid-template-columns 설정으로 그리드 레이아웃 처리 예제
  • [ 〈line-names〉? 〈string〉 〈track-size〉? 〈line-names〉? ]+ [ / 〈explicit-track-list〉 ]?CSS Grid Layout Module Level 2
    그리드 항목의 이름(grid-area)을 행 설정('/' 기준 좌측)에서 배치 순서에 따라 행 단위로 따옴표로 감싸 작성한다.
  • 〈'grid-template-areas'〉;CSS Grid Layout Module Level 2
    항목의 명시된 이름을 설정으로 그리드 레이아웃 처리 예제

버전 명세

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

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


Last review date: 2022-6-23

지원 웹브라우저