> 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-auto-fill-fit.md).

# Grid 자동 반복 채움/맞춤

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

[`repeat()`](/css-grid/css-grid-guide/repea-function.md) 함수의 첫번째 인자는 반복 횟수를 설정합니다. 상수 대신 변수 값으로 자동 채움(`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>

![](/files/-LH8CtUe-p7qP0QZeg8u)

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