> 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-items-layout/grid-line.md).
# 라인 기반
## 사용법
그리드 라인을 기반으로 하여 아이템을 배치(레이아웃) 할 수 있습니다.
| **속성** | **값(공통)** | **비고** |
| ------------------- | --------------- | ---------------------- |
| `grid-row-start` | `` | `` 또는 `` |
| | `span ` | |
| | `span ` | |
| | `auto` | |
| `grid-row-end` | | |
| `grid-column-start` | | |
| `grid-column-end` | | |
**값**
| **값** | **설명** |
| --------------- | ------------------------------------ |
| `` | "그리드라인 번호" 또는 "그리드라인을 참조하는 이름" |
| `span ` | 상대적으로 범위에 추가 설정하는 기준이 되는 그리드라인 개수 |
| `span ` | 상대적으로 범위에 추가 설정하는 기준이 되는 그리드라인 참조 이름 |
| `auto` | 자동 배치, 자동 `span`, 기본 `span 1` |
**예시**
`.item-a` 아이템 요소의 배치를 그리드 라인 번호 또는 참조 이름을 사용하여 설정합니다.
```css
.item-a {
grid-row-start: row1-start;
grid-row-end: 3; /* third-line과 동일 */
grid-column-start: 2; /* line2와 동일 */
grid-column-end: five;
}
```
### 상대 영역 설정
`span`을 사용해 상대적으로 영역을 설정할 수 있습니다.
`.item-b` 아이템 요소를 `span` 설정(상대적 범위 추가)을 사용하여 레이아웃 한 코드입니다.
```css
.item-b {
grid-row-start: 2;
grid-row-end: span 2;
grid-column-start: 1;
grid-column-end: span col4-start;
}
```
{% hint style="info" %}
grid-row-end 또는 grid-column-end 설정이 없을 경우, 아이템은 기본적으로 1개의 셀(cell) 만큼 영역으로 사용합니다. 만약 아이템 배치가 겹쳐지는 상황이 발생하면 z-index 속성 값이 높은 쪽이 위에 배치됩니다.
{% endhint %}
### 속기형 속성
그리드 아이템 행/열, 시작/끝 배치 설정을 속기형으로 설정할 수 있습니다.
| **속성** | **값(공통)** |
| ------------- | ------------------------------- |
| `grid-row` | `` / `` |
| | `` / `span ` |
| `grid-column` | |
**값**
| **값** | **설명** |
| -------------- | ------------------------------------------ |
| `` | 그리드라인 시작점 (번호 또는 참조 이름) |
| `` | 그리드라인 끝점 (번호 또는 참조 이름) |
| `span ` | 상대적으로 범위에 추가 설정하는 기준이 되는 그리드라인 개수 또는 참조 이름 |
**예시**
`.item-c` 아이템 요소 배치에 속기형 속성을 사용 해봅니다.
```css
.item-c {
grid-row: third-line / 4; /* third-line 값과 동일하게 처리됨. */
grid-column: 3 / span 2;
}
```
{% hint style="info" %}
속기형 속성 값으로 시작점만 설정하고 끝점(\)을 설정하지 않으면 1개 셀(cell)만큼 사용 됩니다.
{% endhint %}
## 실습
{% embed url="" %}
## 레퍼런스
{% embed url="" %}
w3.org/TR/css-grid-1/#line-placement
{% endembed %}
{% embed url="" %}
w3.org/TR/css-grid-1/#common-uses-numeric
{% endembed %}
{% embed url="" %}
w3.org/TR/css-grid-1/#placement-shorthands
{% endembed %}