CSS 갭 속성

정의와 사용법

gap 속성은 flexbox, 그리드 또는 다중 열 레이아웃에서 행과 열 간의 간격 크기를 정의합니다. 이는 다음 속성의 약자 속성입니다:

주의:gap 속성은 이전에 grid-gap。

다른 것도 참조하세요:

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

CSS 강의:CSS 융합 상자 레이아웃

CSS 강의:CSS 다중 열 레이아웃

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

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

예제

예제 1

행과 열 간의 간격을 50px로 설정합니다:

.grid-container {
  gap: 50px;
}

개인적으로 시도해 보세요

예제 2: 그리드 레이아웃

그리드 레이아웃에서 행 간 간격을 20px로, 열 간 간격을 50px로 설정합니다:

#grid-container {
  display: grid;
  gap: 20px 50px;
}

개인적으로 시도해 보세요

예제 3: 융합 상자 레이아웃

융합 상자 레이아웃에서 행 간 간격을 20px로, 열 간 간격을 70px로 설정합니다:

#flex-container {
  display: flex;
  gap: 20px 70px;
}

개인적으로 시도해 보세요

예제 4: 다중 열 레이아웃

다중 열 레이아웃에서 열 간 간격을 50px로 설정합니다:

#newspaper {
  columns: 3;
  gap: 50px;
}

개인적으로 시도해 보세요

CSS 문법

gap: row-gap column-gap|initial|inherit;
값 설명
row-gap 그리드 또는 융합 상자 레이아웃에서 행 간 간격 크기를 설정합니다.
column-gap 그리드, 융합 상자, 또는 다중 열 레이아웃에서 열 간 간격 크기를 설정합니다.
initial 이 속성을 기본 값으로 설정합니다. 참조: initial。
inherit 이 속성은 부모 요소에서 상속됩니다. 참조: inherit。

기술 세부 사항

기본 값: normal normal
상속: 아니요
애니메이션 제작: 지원됨. 개별 속성을 확인하세요. 참조:애니메이션 관련 속성。
버전: CSS Box Alignment Module Level 3
JavaScript 문법: object.style.gap="50px 100px"

브라우저 지원

표의 숫자는 이 속성을 최초로 지원한 브라우저 버전을 나타냅니다.

레이아웃 크롬 IE / 엣지 파이어폭스 사파리 오페라
그리드에서 66 16 61 12 53
융합 상자에서 84 84 63 14.1 70
다중 열에서 66 16 61 지원하지 않음 53