Properties

Properties

Editing
  • account_tree
  • bug_report

grid-template-areas

그리드 레이아웃 내의 영역을 지정한다.

설명

grid-area 속성을 사용하여 그리드 항목의 이름을 지정한 다음 grid-template-areas 속성의 값으로 참조할 수 있다. 각 영역은 인용 부호로 감싸 정의한다. 이름 없는 격자 항목을 나타내려면 마침표를 사용한다.

사용 가능한 값 타입

〈'grid-template-areas'〉

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

사용되는 키워드

  • none

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

사용되는 타입

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

  • 〈string〉

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

    • "this is a 'string'."

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

구문

  • grid-template-areas 〈string〉+;CSS3
    grid-template-areas 설정으로 그리드 레이아웃 처리 예제

버전 명세

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

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


Last review date: 2022-6-23

지원 웹브라우저