CSS grid-column-gap 속성

정의와 사용법

grid-column-gap 속성은 그리드 레이아웃에서 컬럼 간격의 크기를 정의합니다。

추가로 참조:

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

CSS 참조 매뉴얼:grip-gap 속성

CSS 참조 매뉴얼:grip-row-gap 속성

예제

컬럼 간격을 50픽셀로 설정합니다:

.grid-container {
  grid-column-gap: 50px;
}

직접 시도해 보세요

CSS 문법

grid-column-gap: length;

속성 값

값 설명
length 모든 합법적인 길이 값, 예를 들어 픽셀이나 백분율. 기본 값은 0입니다. 참조:길이 단위.

기술 세부 사항

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

브라우저 지원

표中的数字은 이 속성을 완전히 지원하는 첫 번째 브라우저 버전을 나타냅니다。

크롬 IE / 엣지 파이어폭스 사파리 오페라
57 16 52 10 44