# 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; 
}
```

![](/files/-LH6uh-OSR7q_xuGnlyN)

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

![](/files/-LH6vCqDcfCIqeZhhG05)

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://yamoo9.gitbook.io/css-grid/css-grid-guide/fr-unit.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.