CSS grid-template-areas 속성

정의와 사용법

grid-template-areas 속성이 그리드 레이아웃에서 영역을 정의합니다.

사용할 수 있습니다 grid-area 속성 이름 그리드 항목을 정의하고 그리드-템플릿-에어리어 속성에서 해당 이름을 참조합니다.

각 영역은 기호로 정의됩니다. 이름 없는 그리드 항목을 인용할 때는 구두점을 사용하십시오.

추가로 참조하십시오:

CSS 가이드:CSS 그리드 프로젝트

CSS 참조 가이드:grid-area 속성

CSS 참조 가이드:grid-template 속성

예제

예제 1

이름이 있는 프로젝트 "myArea" 은 다섯 열 그리드 레이아웃에서 두 열을 걸쳐 있습니다:

.item1 {
  grid-area: myArea;
}
.grid-container {
  display: grid;
  grid-template-areas: "myArea myArea . . .";
}

직접 시도해 보세요

예제 2

두 행을 규정하고, "item1" 은 전 두 행에서 세 번째 열을 걸쳐 있습니다(다섯 열 그리드 레이아웃에서):

.item1 {
  grid-area: myArea;
}
.grid-container {
  display: grid;
  grid-template-areas:
    'myArea myArea . . .'
    'myArea myArea . . .';
}

직접 시도해 보세요

예제 3

모든 항목을 명명하고, 준비된 웹 페이지 템플릿을 만들어 보세요:

.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }
.grid-container {
  display: grid;
  grid-template-areas:
    'header header header header header'
    'menu main main main right right'
    'menu footer footer footer footer';
}

직접 시도해 보세요

CSS 문법

grid-template-areas: none|itemnames;

속성 값

값 설명
none 기본 값. 이름 없는 그리드 영역(grid areas).
itemnames 각 행과 각 열이 어떻게 표시되어야 하는지 정의하는 시퀀스를 규정합니다.

기술 세부 사항

기본 값: none
thừa kế: 아니요
애니메이션 제작: 지원됩니다. 참조하십시오:애니메이션 관련 속성。
버전: CSS Grid Layout 모듈 레벨 1
JavaScript 문법: object.style.gridTemplateAreas=". . . myArea myArea"

브라우저 지원

표의 숫자는 이 속성을 완전히 지원하는 첫 번째 브라우저 버전을 나타냅니다.

크롬 IE / 엣지 파이어폭스 사파리 오페라
57 16 52 10 44