> For the complete documentation index, see [llms.txt](https://yamoo9.gitbook.io/css-grid/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://yamoo9.gitbook.io/css-grid/css-grid-guide/grid-gutter.md).

# Grid 거터

## 사용법 <a href="#usage" id="usage"></a>

그리드 라인(행/열) 사이 간격(gap)을 조정합니다.

| **속성**     | **값**                              | **비고** |
| ---------- | ---------------------------------- | ------ |
| row-gap    | \<line-size>                       |        |
| column-gap | \<line-size>                       |        |
| gap        | \<grid-row-gap> \<grid-column-gap> | 속기형 속성 |

{% hint style="warning" %}
그리드 거터 속성의 이름 앞에 붙어 있던 grid- 는 모두 제외 되었습니다. 이전에 사용되던 이름은 grid-row-gap, grid-column-gap, gap 입니다. \
\
(모든 브라우저 호환 이전까지는 예전 이름을 사용하거나, [postcss-gap-properties](https://jonathantneal.github.io/postcss-gap-properties/)를 사용합니다)
{% endhint %}

**예시**

```css
.grid-container {
  grid-template-rows: 80px auto 80px;
  grid-template-columns: 100px 50px 100px;
  /* 행 사이 간격 설정 */
  row-gap: 10px;
  /* 열 사이 간격 설정 */
  column-gap: 15px;
}
```

![](https://3440753900-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LH1dN99ZXtZTFG_0JKV%2F-LH6qxqVgEPLTSSk3JXq%2F-LH6sNXt4TAdBUxJ7cQW%2Fimage.png?alt=media\&token=02a5067e-ca71-4045-b29e-f5ee15b4ad3f)

위 예제에서 다룬 속성을 속기형으로 작성하면 다음과 같습니다.

```css
.grid-container {
  grid-template: 80px auto 80px / 100px 50px 100px;
  /* 행/열 사이 간격 설정 */
  gap: 10px 15px;
}
```

{% hint style="info" %}
grid-gap 값으로 1개만 입력하면 행/열 사이 간격이 동일하게 설정됩니다.

```css
gap: 20px; /* grid-row-gap: 20px; grid-column-gap: 20px; */
```

{% endhint %}

## 실습 <a href="#practice" id="practice"></a>

{% embed url="<https://codepen.io/yamoo9/pen/vjEEwj>" %}

## 레퍼런스 <a href="#reference" id="reference"></a>

그리드 행 / 열 사이 간격을 조정할 수 있습니다. 퍼센트 값은 콘텐츠 영역에 상대적으로 설정 됩니다.

![](https://3440753900-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LH1dN99ZXtZTFG_0JKV%2F-LHUtqhlZT9Rm-Q0bGEy%2F-LHUztAJWhc6tD9VTFjq%2Fimage.png?alt=media\&token=f7da8f25-ace0-4a4d-afd1-152dfa063934)

{% embed url="<https://www.w3.org/TR/css-grid-1/#gutters>" %}
w3.org/TR/css-grid-1/#gutters
{% endembed %}