# 라인 기반

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

그리드 라인을 기반으로 하여 아이템을 배치(레이아웃) 할 수 있습니다.

![](/files/-LH7L0dz8xe8FYdVF5D0)

| **속성**              | **값(공통)**       | **비고**                 |
| ------------------- | --------------- | ---------------------- |
| `grid-row-start`    | `<line>`        | `<number>` 또는 `<name>` |
|                     | `span <number>` |                        |
|                     | `span <name>`   |                        |
|                     | `auto`          |                        |
| `grid-row-end`      |                 |                        |
| `grid-column-start` |                 |                        |
| `grid-column-end`   |                 |                        |

**값**

| **값**           | **설명**                               |
| --------------- | ------------------------------------ |
| `<line>`        | "그리드라인 번호" 또는 "그리드라인을 참조하는 이름"       |
| `span <number>` | 상대적으로 범위에 추가 설정하는 기준이 되는 그리드라인 개수    |
| `span <name>`   | 상대적으로 범위에 추가 설정하는 기준이 되는 그리드라인 참조 이름 |
| `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;
}
```

![](/files/-LH7Kil5BnFOFp_fa4Nl)

### 상대 영역 설정 <a href="#span" id="span"></a>

`span`을 사용해 상대적으로 영역을 설정할 수 있습니다.

![](/files/-LH7L_AoBA2C_9ChDB96)

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

![](/files/-LH7M1LVKy1gmxz1_Cm6)

{% hint style="info" %}
grid-row-end 또는 grid-column-end 설정이 없을 경우, 아이템은 기본적으로 1개의 셀(cell) 만큼 영역으로 사용합니다. 만약 아이템 배치가 겹쳐지는 상황이 발생하면 z-index 속성 값이 높은 쪽이 위에 배치됩니다.
{% endhint %}

### 속기형 속성 <a href="#shortcode" id="shortcode"></a>

그리드 아이템 행/열, 시작/끝 배치 설정을 속기형으로 설정할 수 있습니다.

![](/files/-LH7NBSlB7BlG6o1wHjs)

| **속성**        | **값(공통)**                       |
| ------------- | ------------------------------- |
| `grid-row`    | `<start-line>` / `<end-line>`   |
|               | `<start-line>` / `span <value>` |
| `grid-column` |                                 |

**값**

| **값**          | **설명**                                     |
| -------------- | ------------------------------------------ |
| `<start-line>` | 그리드라인 시작점 (번호 또는 참조 이름)                    |
| `<end-line>`   | 그리드라인 끝점 (번호 또는 참조 이름)                     |
| `span <value>` | 상대적으로 범위에 추가 설정하는 기준이 되는 그리드라인 개수 또는 참조 이름 |

**예시**

`.item-c` 아이템 요소 배치에 속기형 속성을 사용 해봅니다.

```css
.item-c {
  grid-row: third-line / 4;  /* third-line 값과 동일하게 처리됨. */
  grid-column: 3 / span 2;
}
```

![](/files/-LH7Nx_NPPSln54p7vTj)

{% hint style="info" %}
속기형 속성 값으로 시작점만 설정하고 끝점(\<end-line>)을 설정하지 않으면 1개 셀(cell)만큼 사용 됩니다.
{% endhint %}

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

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

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

![](/files/-LH7LDuTSa8QsyoRU6v-)

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

![](/files/-LH7Ml_lZUGGWfxL90e1)

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

![](/files/-LH7OBBFunOrERHUmR_M)

{% embed url="<https://www.w3.org/TR/css-grid-1/#placement-shorthands>" %}
w3.org/TR/css-grid-1/#placement-shorthands
{% 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/grid-items-layout/grid-line.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.