# Grid 자동 반복 채움/맞춤

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

[`repeat()`](https://yamoo9.gitbook.io/css-grid/css-grid-guide/repea-function) 함수의 첫번째 인자는 반복 횟수를 설정합니다. 상수 대신 변수 값으로 자동 채움(`auto-fill`)을 설정하면 컨테이너 영역을 자동으로 반복하여 채웁니다. 반면 자동 맞춤(`auto-fit`)으로 설정하면 그리드 컨테이너 내부에 빈 트랙이 존재할 경우 그 공간을 나눠 맞춥니다.

```css
.grid-container {
  display: grid;

  /* 자동 채우기(auto-fill) 
     채움(fill)은 반복 횟수 주어질 경우, 크기 또는 최소, 최대 크기 만큼 
     계산하여 처리하지만 정해진 수 이상은 처리하지 않습니다. */
  grid-template-columns: repeat(auto-fill, 1fr 2fr);

  /* 자동 채우기(auto-fit) 
     맞춤(fit)은 채움과 유사하게 작동하지만, 그리드 내부에 빈 트랙이 존재할 경우
     반복 횟수만큼 반복된 트랙을 빈 트랙 공간을 나눠 핏팅(fitting)합니다. */
  grid-template-rows: repeat(auto-fit, minmax(80px, auto));
}
```

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

![](https://3440753900-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LH1dN99ZXtZTFG_0JKV%2F-LH85n5sc72uXdJzq2sS%2F-LH8CtUe-p7qP0QZeg8u%2Fimage.png?alt=media\&token=1513daec-cd72-4218-9b44-01739d17f482)

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