Properties

Properties

Editing
  • account_tree
  • bug_report

grid-template-areas

모든 그리드 항목에 대한 전체적인 그리드 레이아웃 구조를 쉽게 시각화시키는 방법을 제공한다.

설명

grid-area 속성을 사용하여 그리드 레이아웃 항목의 식별값을 지정한 다음 grid-template-areas 속성의 값으로 참조할 수 있다. 각 행(row) 영역은 인용 부호(문자열)로 감싸 정의하고 그 문자열 내에서 공백으로 열(column)을 구분하여 작성한다. 이름 없는 레이아웃 항목을 나타내려면 마침표를 사용한다. 이 경우 자동 배치 알고리즘에 따라 배치된다. 

모든 그리드 항목이 어떠한 식이든 grid-template-areas 속성에서 정의되어야 하며 각 행(row)당 열(colum)의 수가 동일해야 한다. 만약 코드상에 정의한 열(colum)의 총 개수보다 실제로 그리드 항목의 수가 적을 때는 그 차이만큼 마침표(.)를 넣어 빈 영역을 만든다.

미디어쿼리(media query)를 통한 반응형 레이아웃 설계에 사용할 경우에는 레이아웃 항목의 식별값(grid-area)이 미디어쿼리 밖에서 정의되어야 한다.

사용 가능한 값 타입

<'grid-template-areas'>

DEVDIC-Specified Data Types

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

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

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

포함된 타입

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

  • <string>

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

    • "this is a 'string'."
    Details

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

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

    • font-family

      글꼴을 지정한다.

    • content

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

    • quotes

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

사용되는 키워드

  • none

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

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

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

구문

  • grid-template-areas: <string>+;
    CSS Grid Layout Module Level 2
    grid-template-areas 설정으로 그리드 레이아웃 처리 예제

버전 명세

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

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


Last review date: 2022-6-23

지원 웹브라우저