gap

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since October 2017.

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

시도해보기

grid-gap 은 해당 속성의 별칭입니다.

구문

css
/* 단일 <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: revert;
gap: revert-layer;

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

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

<length>

그리드 선을 분할하는 간격의 너비.

<percentage>

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

형식 정의

초기값as each of the properties of the shorthand:
적용대상multi-column elements, flex containers, grid containers
상속no
계산 값as 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:

형식 구문

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

<row-gap> =
normal |
<length-percentage [0,∞]>

<column-gap> =
normal |
<length-percentage [0,∞]>

<length-percentage> =
<length> |
<percentage>

예제

플렉스 레이아웃

HTML

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

CSS

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

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

CSS

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

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

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

결과

명세

Specification
CSS Box Alignment Module Level 3
# gap-shorthand

브라우저 호환성

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
gap
Supported in Flex Layout
Supported in Grid Layout
calc() values
<percentage> values
Supported in Multi-column Layout

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Uses a non-standard name.
Has more compatibility info.

같이 보기