> 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-implict-auto-track-size.md).
# Grid 트랙 크기 자동 설정
## 사용법
#### 그리드 행/열 트랙 크기 자동 설정
암시적인 그리드 행/열 트랙 크기를 자동으로 설정합니다.
#### **암시적인 그리드 트랙이란?**
사용자가 설정하지 않은 임의의 트랙으로 사용자가 명시적으로 `grid-template-rows` / `grid-template-columns` 속성을 설정하지 않은 나머지 그리드 트랙을 가리킵니다.
| **속성** | **값** |
| ------------------- | ------------------ |
| `grid-auto-rows` | `` ... |
| `grid-auto-columns` | `` ... |
**값**
* **``**: 그리드에서 사용 가능한 단위 (`px`, `rem`, `em`, `%`, `fr` 등)
**예시**
사용자가 명시적으로 행/열 템플릿 속성을 설정하면 그리드 트랙 크기로 적용됩니다.
```css
.grid-container {
grid-template-rows: repeat(2, 60px);
grid-template-columns: 90px 90px;
}
```
결과는 2행 2열 그리드가 만들어집니다.
여기서 만약 개별 그리드 아이템에 행/열 위치를 그리드 라인 기준으로 배치하게 되면 어떻게 될까요?
* grid-row
* grid-column
```css
.item-a {
grid-row: 2 / 3;
grid-column: 1 / 2;
}
.item-b {
grid-row: 2 / 3;
grid-column: 5 / 6;
}
```
결과는 다음과 같이 처리됩니다.
결과에서 보여지듯이 `.item-b`에 설정한 열 그리드 라인 5\~6 배치는 암시적인 열 그리드(`grid-auto-columns`) 설정에서 정의되지 않은 영역으로, 존재하지 않는 행/열에 배치하기 위해 암시적인 트랙이 자동으로 생성됩니다. (그림을 자세히 보면 암시적으로 생성된 트랙 크기는 0으로 설정됩니다)
이처럼 자동으로 생성되는 그리드 트랙 크기를 임의의 값으로 설정하고 싶다면 다음과 같이 설정할 수 있습니다.
```css
.grid-container {
grid-auto-columns: 60px;
}
```
결과를 그려보면 다음과 같습니다. 암시적으로 생성된 그리드 트랙 크기는 `60px`로 설정됩니다.
## 레퍼런스
{% embed url="" %}
w3.org/TR/css-grid-1/#propdef-grid-auto-columns
{% endembed %}
