CSS grid-column-end 속성

정의와 사용법

grid-column-end 속성은 항목이 얼마나 많은 열을 건너쳐야 하는지 정의하거나, 항목이 어느 열선(column-line)에서 끝나는지 정의합니다.

페이지 끝의 예제를 참고하세요.

다른 것도 참고:

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

예제

예제 1

"item1"을 세 열을 건너쳐 표시하도록 합니다:

.item1 {
  grid-column-end: span 3;
}

본인이 직접 시도해 보세요

예제 2

항목을 건너쳐야 하는 열 수 대신 열선 값을 사용할 수 있습니다:

.item1 {
  grid-column-end: 3;
}

본인이 직접 시도해 보세요

CSS 문법

grid-column-end: auto|span n|column-line;

속성 값

값 설명
auto 기본 값. 항목은 한 열을 건너쳐야 합니다.
span n 항목이 얼마나 많은 열을 건너쳐야 하는지 정의합니다.
column-line 항목이 표시되는 열에서 멈추는 위치를 정의합니다.

기술 세부 사항

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

브라우저 지원

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

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