CSS 그리드 속성

이전 페이지 gap
다음 페이지 grid-area

정의와 사용법

grid 속성은 다음 속성의 단축 속성입니다：

추가로 참조:

예제

예제 1

첫 번째 행의 높이가 150 픽셀인 세 열 그리드 레이아웃을 만듭니다：

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

직접 시도해보세요

예제 2

두 행을 정의하고, 'item1'이 전 두 행의 전 두 열을 건너쳐야 합니다(다섯 열 그리드 레이아웃을 사용합니다)：

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

직접 시도해보세요

CSS 문법

grid: none|grid-template-rows / grid-template-columns|grid-template-areas|grid-template-rows / [grid-auto-flow] grid-auto-columns[grid-auto-flow] grid-auto-rows / grid-template-columns|initial|inherit;

속성 값

값	설명
none	기본 값. 행이나 열의 크기를 정의하지 않습니다.
grid-template-rows / grid-template-columns	열과 행의 크기를 정의합니다.
grid-template-areas	이름 지정된 항목을 사용하는 그리드 레이아웃을 정의합니다.
grid-template-rows / grid-auto-columns	행의 크기(높이)와 열의 자동 크기를 정의합니다.
grid-auto-rows / grid-template-columns	행의 자동 크기를 정의하고 grid-template-columns 속성을 설정합니다.
grid-template-rows / grid-auto-flow grid-auto-columns	행의 크기(높이)를 정의하고 자동 정렬된 항목과 열의 자동 크기를 배치합니다.
grid-auto-flow grid-auto-rows / grid-template-columns	자동 정렬된 항목을 배치하는 방법과 행의 자동 크기를 설정하고 grid-template-columns 속성을 정의합니다.
initial	이 속성을 기본 값으로 설정합니다. 참조: initial.
inherit	이 속성을 부모 요소에서 상속합니다. 참조: inherit.

기술 세부 사항

기본 값:	none none none auto auto row
상속:	no
애니메이션 제작:	yes, see individual properties. Please see:애니메이션 관련 속성.
버전:	CSS Grid Layout Module Level 1
JavaScript 문법:	object.style.grid="250px / auto auto auto"