gap (grid-gap)

CSS gap 속성은 행과 열 사이의 간격(거터)을 설정합니다. row-gapcolumn-gap단축 속성입니다.

원래 CSS Grid Layout은 접두사를 붙인 grid-gap 속성을 정의했었으며, 현재 gap으로 대체하는 과정 중에 있습니다. 그러나 grid-gap만 구현하고 그리드 레이아웃용 gap은 구연하지 않은 브라우저를 지원하려면 위의 대화형 예제처럼 접두사 속성을 사용해야 합니다.

구문

/* 단일 <length> 값 */
gap: 20px;
gap: 1em;
gap: 3vmin;
gap: 0.5cm;

/* 단일 <percentage> 값 */
gap: 16%;
gap: 100%;

/* 이중 <length> 값 */
gap: 20px 10px;
gap: 1em 0.5em;
gap: 3vmin 2vmax;
gap: 0.5cm 2mm;

/* 이중 또는 혼합 <percentage> 값 */
gap: 16% 100%;
gap: 21px 82%;

/* calc() 값 */
gap: calc(10% + 20px);
gap: calc(20px + 10%) calc(10% - 5px);

/* 전역 값 */
gap: inherit;
gap: initial;
gap: unset;

gap<'row-gap'> 값을 사용해 지정하며, 선택적으로 <'column-gap'>을 추가할 수 있습니다. <'column-gap'>을 생략한 경우 <'row-gap'>과 동일한 값을 사용합니다.

<'row-gap'><'column-gap'>은 각각 <length> 또는 <percentage>를 사용해 지정합니다.

<length>
그리드 선을 분할하는 간격의 너비.
<percentage>
그리드 선을 분할하는 간격의 너비. 요소 크기에 상대적입니다.

형식 구문

<'row-gap'> <'column-gap'>?

예제

플렉스 레이아웃

HTML

<div id="flexbox">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

CSS

#flexbox {
  display: flex;
  flex-wrap: wrap;
  width: 300px;
  gap: 20px 5px;
}

#flexbox > div {
  border: 1px solid green;
  background-color: lime;
  flex: 1 1 auto;
  width: 100px; 
  height: 50px; 

}

결과

그리드 레이아웃

HTML

<div id="grid">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

CSS

#grid {
  display: grid;
  height: 200px;
  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
  gap: 20px 5px;
}

#grid > div {
  border: 1px solid green;
  background-color: lime;
}

결과

다열 레이아웃

HTML

<p class="content-box">
  This is some multi-column text with a 40px column
  gap created with the CSS <code>gap</code> property.
  Don't you think that's fun and exciting? I sure do!
</p>

CSS

.content-box {
  column-count: 3;
  gap: 40px;
}

결과

명세

Specification Status Comment
CSS Box Alignment Module Level 3
The definition of 'gap' in that specification.
Working Draft Initial definition
초기값as each of the properties of the shorthand:
적용대상multi-column elements, flex containers, grid containers
상속no
Computed valueas each of the properties of the shorthand:
  • row-gap: as specified, with <length>s made absolute, and normal computing to zero except on multi-column elements
  • column-gap: as specified, with <length>s made absolute, and normal computing to zero except on multi-column elements
Animation typeas each of the properties of the shorthand:

브라우저 호환성

플렉스 레이아웃 지원

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Supported in Flex LayoutChrome Full support 84Edge Full support 84Firefox Full support 63IE No support NoOpera Full support 70Safari No support NoWebView Android Full support 84Chrome Android Full support 84Firefox Android Full support 63Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No

Legend

Full support  
Full support
No support  
No support

그리드 레이아웃 지원

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Supported in Grid LayoutChrome Full support 66
Full support 66
Full support 57
Alternate Name
Alternate Name Uses the non-standard name: grid-gap
Full support 29
Alternate Name Disabled
Alternate Name Uses the non-standard name: grid-gap
Disabled From version 29: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Edge Full support 16
Full support 16
Full support 16
Alternate Name
Alternate Name Uses the non-standard name: grid-gap
Firefox Full support 61
Full support 61
Full support 52
Alternate Name
Alternate Name Uses the non-standard name: grid-gap
No support 40 — 59
Alternate Name Disabled
Alternate Name Uses the non-standard name: grid-gap
Disabled From version 40 until version 59 (exclusive): this feature is behind the layout.css.grid.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support 53
Full support 53
Full support 44
Alternate Name
Alternate Name Uses the non-standard name: grid-gap
Full support 28
Alternate Name Disabled
Alternate Name Uses the non-standard name: grid-gap
Disabled From version 28: this feature is behind the Enable experimental Web Platform features preference.
Safari Full support 10.1
Alternate Name
Full support 10.1
Alternate Name
Alternate Name Uses the non-standard name: grid-gap
Full support 12
WebView Android Full support 66
Full support 66
Full support 57
Alternate Name
Alternate Name Uses the non-standard name: grid-gap
Chrome Android Full support 66
Full support 66
Full support 57
Alternate Name
Alternate Name Uses the non-standard name: grid-gap
Full support 29
Alternate Name Disabled
Alternate Name Uses the non-standard name: grid-gap
Disabled From version 29: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Firefox Android Full support 61
Full support 61
Full support 52
Alternate Name
Alternate Name Uses the non-standard name: grid-gap
No support 40 — 59
Alternate Name Disabled
Alternate Name Uses the non-standard name: grid-gap
Disabled From version 40 until version 59 (exclusive): this feature is behind the layout.css.grid.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Full support 47
Full support 47
Full support 43
Alternate Name
Alternate Name Uses the non-standard name: grid-gap
Full support 28
Alternate Name Disabled
Alternate Name Uses the non-standard name: grid-gap
Disabled From version 28: this feature is behind the Enable experimental Web Platform features preference.
Safari iOS Full support 10.3
Alternate Name
Full support 10.3
Alternate Name
Alternate Name Uses the non-standard name: grid-gap
Full support 12
Samsung Internet Android Full support 9.0
Full support 9.0
Full support 7.0
Alternate Name
Alternate Name Uses the non-standard name: grid-gap
calc() valuesChrome Full support 66Edge Full support 16Firefox Full support 52IE No support NoOpera Full support 53Safari No support NoWebView Android Full support 66Chrome Android Full support 66Firefox Android Full support 52Opera Android Full support 47Safari iOS No support NoSamsung Internet Android Full support 9.0
<percentage> valuesChrome Full support 66Edge Full support 16Firefox Full support 52IE No support NoOpera Full support 53Safari No support NoWebView Android Full support 66Chrome Android Full support 66Firefox Android Full support 52Opera Android Full support 47Safari iOS No support NoSamsung Internet Android Full support 9.0

Legend

Full support  
Full support
No support  
No support
User must explicitly enable this feature.
User must explicitly enable this feature.
Uses a non-standard name.
Uses a non-standard name.

다열 레이아웃 지원

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Supported in Multi-column LayoutChrome Full support 66Edge Full support 16Firefox Full support 61IE No support NoOpera Full support 53Safari No support NoWebView Android Full support 66Chrome Android Full support 66Firefox Android Full support 61Opera Android Full support 47Safari iOS No support NoSamsung Internet Android Full support 9.0

Legend

Full support  
Full support
No support  
No support

같이 보기