# Grid 템플릿 행/열

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

공백으로 구분된 값 리스트를 해석하여 그리드 행(Row), 열(Column)을 설정합니다. 각 값은 [트랙](https://yamoo9.gitbook.io/css-grid/css-grid-term#grid-track) 크기를 말합니다.

| **속성**                  | **값**                          |
| ----------------------- | ------------------------------ |
| `grid-template-rows`    | \<track-size> ...              |
|                         | \<line-name> \<track-size> ... |
| `grid-template-columns` | \<track-size> ...              |
|                         | \<line-name> \<track-size> ... |

**값**

* `<track-size>`: 그리드에서 사용 가능한 공간의 길이 (`px`, `rem`, `em`, `%`, [`fr`](https://yamoo9.gitbook.io/css-grid/css-grid-guide/fr-unit) 등)
* `<line-name>`: 사용자가 설정한 임의의 선 이름

**예시**

```css
.grid-container {
  grid-template-rows: 25% 100px auto;
  grid-template-columns: 40px 50px auto 50px 40px;
}
```

![](https://3440753900-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LH1dN99ZXtZTFG_0JKV%2F-LH6G0OQpsVhg5lSIwqa%2F-LH6GjZk38tS0WNGmbW2%2Fimage.png?alt=media\&token=eb54ee29-0a1d-4bf1-be6c-980c769e16ca)

#### 선 이름 설정

사용자가 임의로 설정한 선 이름(`[이름]`)을 사용할 수도 있습니다.

```css
.grid-container {
  grid-template-rows: 
    [row-1-start] 25% [row-1-end] 100px [third-line] auto [last-line];
  grid-template-columns: 
    [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end];
}
```

![](https://3440753900-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LH1dN99ZXtZTFG_0JKV%2F-LH6G0OQpsVhg5lSIwqa%2F-LH6Hkc3bH1YPPUL53a5%2Fimage.png?alt=media\&token=45be3508-66d4-4f26-bc08-5cc85230fda0)

선 이름을 1개 이상 설정하는 것도 가능합니다. 방법은 `[이름-1 이름-2]`와 같이 `[]` 내부에 공백으로 구분된 이름을 추가하면 됩니다.

```css
.grid-container {
  grid-template-rows: [row-1] 100px [rows-1-end row-2-start] 30% [row-2-end];
}
```

설정이 반복되는 경우, [`repeat()`](https://yamoo9.gitbook.io/css-grid/css-grid-guide/repea-function) 함수를 사용하여 손쉽게 설정할 수 있습니다.

```css
.grid-container {
  grid-template-rows: repeat(3, 80px [row-start]) 5%;
  /* 결과: 80px [row-start] 80px [row-start] 80px [row-start] 5% */
  grid-template-columns: repeat(2, 15% 30px) auto;
  /* 결과: 15% 30px 15% 30px auto */
}
```

`fr` 단위를 사용하여 `<track-size>`를 그리드의 남은 공간 일부를 설정할 수 있습니다.

```css
.grid-container {
  grid-template-columns: repeat(3, 1fr); /* 1fr 1fr 1fr */
}
```

`fr` 단위는 고정 값(`px`, `rem` 등) 단위가 먼저 계산된 후, 남은 공간을 사용하여 계산 처리됩니다.

```css
.grid-container {
  grid-template-rows: 1fr 100px 2fr;
}
```

## 실습 <a href="#practice" id="practice"></a>

{% embed url="<https://codepen.io/yamoo9/pen/vjEEwj>" %}

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

명시적으로 그리드를 정의할 때, 그리드 컨테이너에 3개의 속성을 사용해 설정할 수 있습니다.

* `grid-template-rows`
* `grid-template-columns`
* [`grid-template-areas`](https://yamoo9.gitbook.io/css-grid/css-grid-guide/template-areas)

![](https://3440753900-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LH1dN99ZXtZTFG_0JKV%2F-LH6hgCXF9xIEPjhFb7u%2F-LH6hs79Kmf5a_6ehZb1%2Fimage.png?alt=media\&token=4ea2b664-9d67-4654-9c40-6b2b5e5fcbcc)

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