> 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/fr-unit.md).

# fr 단위

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

그리드 트랙 사이즈로 사용 되는 `fr` 단위는 유연한 단위로 그리드 컨테이너의 여유 공간을 비율로 나눠 설정합니다. \
퍼센트(`%`) 단위와 유사해 보일 수 있으나, 퍼센트 값과 다르게 길이가 아닙니다. 그래서 `calc()` 함수에서 다른 값과 \
함께 처리할 수 없습니다.

**예시**

```css
.grid-container {
  display: grid;
  /* Fraction(fr) 단위 */
  grid-template-rows: 1fr 1fr;
  grid-template-columns: 1fr 1.3fr 1fr; 
}
```

![](https://3440753900-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LH1dN99ZXtZTFG_0JKV%2F-LH6uHqWGvU2xGAQa-LJ%2F-LH6uh-OSR7q_xuGnlyN%2Fimage.png?alt=media\&token=daa80761-839b-468c-80cd-3d319493b483)

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

![](https://3440753900-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LH1dN99ZXtZTFG_0JKV%2F-LH6uHqWGvU2xGAQa-LJ%2F-LH6vCqDcfCIqeZhhG05%2Fimage.png?alt=media\&token=edaceba4-b485-4c5e-8c32-8c381ce4100d)

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