> 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).

# 라인 기반

## 사용법 <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 %}