CSS grid-column-start 속성

정의와 사용법

grid-column-start 속성은 항목이 시작할 열선을 정의합니다.

추가 참고:

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

CSS 참조 가이드:grid-column 속성

CSS 참조 가이드:grid-column-end 속성

CSS 참조 가이드:grid-row-start 속성

CSS 참조 가이드:grid-row-end 속성

예제

"item1"이 열 2에서 시작하도록 합니다:

.item1 {
  grid-column-start: 2;
}

직접 테스트해 보세요

CSS 문법

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

속성 값

값 설명
자동 기본 값. 항목은 흐름 배치에 따라 이동합니다.
span n 항목이 걸쳐지는 열 수를 지정합니다.
column-line 항목이 표시되는 열을 지정합니다.

기술 세부 사항

기본 값: 자동
상속: 아니요
애니메이션 제작: 지원됩니다. 참고事项:애니메이션 관련 속성。
버전: CSS Grid Layout Module Level 1
JavaScript 문법: object.style.gridColumnStart="3"

브라우저 지원

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

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