CSS grid-gap 속성

정의와 사용법

grid-gap 속성은 그리드 레이아웃에서 행과 열 간의 간격 크기를 정의하는 속성으로, 다음 속성의 단축 속성입니다:

주의:이 속성은 CSS3에서 다음으로 이름을 변경되었습니다: gap.

다른 것을 참고하세요:

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

CSS 참조 설명서:grip-row-gap 속성

CSS 참조 설명서:grip-column-gap 속성

예제

예제 1

행과 열 간의 간격을 간단하게 50픽셀로 설정합니다:

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

자신이 직접 테스트해 보세요

예제 2

행 간격을 20픽셀, 열 간격을 50픽셀로 설정합니다:

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

자신이 직접 테스트해 보세요

CSS 문법

grid-gap: grid-row-gap grid-column-gap;

속성 값

값 설명
grid-row-gap 그리드 레이아웃에서 행 간격의 크기를 설정합니다. 기본 값은 0입니다.
grid-column-gap 행 간격의 크기를 설정합니다. 기본 값은 0입니다.

기술 세부 사항

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

브라우저 지원

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

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