CSS grid-template 속성

정의와 사용법

grid-template 속성은 다음 속성의 요약 속성입니다：

추가로 참조하십시오：

CSS 강의：CSS 그리드 프로젝트

CSS 참조 매뉴얼：grid-area 속성

CSS 참조 매뉴얼：grid-template-rows 속성

CSS 참조 매뉴얼：grid-template-columns 속성

CSS 참조 매뉴얼：grid-template-areas 속성

예시

예제 1

제1단 150픽셀 높이의 세칸 격자 레이아웃을 만듭니다：

.grid-container {
  display: grid;
  grid-template: 150px / auto auto auto;
}

본인이 직접 시도해 보세요

예제 2

두 행을 정의하고, "item1" 은 다섯 열 grid layout에서 상단 두 행의 상단 두 열을 지배합니다:

.item1 {
  grid-area: myArea;
}
.grid-container {
  display: grid;
  grid-template:
    '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:
    'header header header header header header'
    'menu main main main right right'
    'menu footer footer footer footer';
}

본인이 직접 시도해 보세요

CSS 문법

grid-template: none|grid-template-rows / grid-template-columns|grid-template-areas|initial|thuộc|;
속성 값
값 설명
none 기본 값. 행이나 열의 크기를 정의하지 않습니다。
grid-template-rows / grid-template-columns 행과 열의 크기를 정의합니다。
grid-template-areas 이름 지정된 항목을 사용하여 그리드 레이아웃을 정의합니다。
initial 이 속성을 기본 값으로 설정합니다. 참고: initial。
thuộc 이 속성을 부모 요소에서 thừa kế합니다. 참고: thuộc。

기술 세부 사항

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

브라우저 지원

표中的 수는 이 속성을 완전히 지원하는 첫 번째 브라우저 버전을 명시합니다。

Chrome IE / Edge Firefox Safari Opera
57 16 52 10 44