CSS 그리드 영역 속성

과목 추천:

정의와 사용법

grid-area 속성은 그리드 요소에 이름을 할당하는 데도 사용될 수 있습니다. 그런 다음, 그리드 컨테이너의 grid-area 속성은 다음 속성의 요약 속성입니다: grid-template-areas 속성 참조로 이름을 지정한 그리드 요소를 참조합니다. 아래 예제를 참조하세요。

또한 참조:

CSS 강의:CSS 그리드 레이아웃

예제

예제 1

"item1" 을 행 2 열 1에서 시작하고, 두 행 세 열을 가로채도록 합니다:

.item1 {
  grid-area: 2 / 1 / span 2 / span 3;
}

직접 시험해 보세요

푸시:更多 예제는 페이지 하단에 제공됩니다。

CSS 문법

grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end | itemname;

속성 값

값 설명
grid-row-start 프로젝트를 표시할 행을 지정합니다。
grid-column-start 프로젝트를 표시할 열을 지정합니다。
grid-row-end 항목이 표시되는 행선에서 멈추거나 몇 행을 건너뛰는지 지정합니다.
grid-column-end 항목이 표시되는 열선에서 멈추거나 몇 열을 건너뛰는지 지정합니다.
itemname 그리드 항목을 정의합니다.

기술 세부 사항

기본 값: auto / auto / auto / auto
thừa kế: 아니요
애니메이션 제작: 지원. 참조:애니메이션 관련 속성。
버전: CSS Grid Layout Module Level 1
JavaScript 문법: object.style.gridArea="1 / 2 / span 2 / span 3"

더 많은 예제

예제 2

Item1은 "myArea"로 명명되어, 다섯 열 그리드 레이아웃에서 모든 다섯 열을 걸쳐 표시됩니다:

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

직접 시험해 보세요

예제 3

"myArea"를 다섯 열 그리드 레이아웃에서 두 열에 걸쳐 표시하도록 합니다 (점은 이름이 없는 항목을 나타냅니다):

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

직접 시험해 보세요

예제 4

"item1"을 두 열과 두 행에 걸쳐 표시하도록 합니다:

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

직접 시험해 보세요

예제 5

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

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

직접 시험해 보세요

브라우저 지원

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

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