CSS 그리드 컬럼 속성

정의와 사용법

grid-column 속성은 그리드 아이템의 크기와 그리드 레이아웃 내의 위치를 정의하며, 다음 속성의 약자 속성입니다:

추가로 참조하십시오:

CSS 교육:CSS 그리드 레이아웃

예제

예제 1

"item1"을 열 1에서 시작하고 두 열을 건너뜁니다:

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

본인이 직접 시도해 보세요

예제 2

열선 값을 사용하여 건너뛰는 열 수를 대체할 수 있습니다:

.item1 {
  grid-column: 1 / 3;
}

본인이 직접 시도해 보세요

CSS 문법

grid-column: grid-column-start / grid-column-end;

속성 값

값 설명
grid-column-start 프로젝트를 어느 열에서 표시할 것인지 정합니다.
grid-column-end 프로젝트를 어느 열선(column-line) 위에서 표시를 멈추거나 얼마나 많은 열을 건너뜁니다.

기술 세부 사항

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

브라우저 지원

표에서의 숫자는 이 속성을 완전히 지원하는 첫 번째 브라우저 버전을 표시합니다.

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