# 라인 기반

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

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

![](https://3440753900-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LH1dN99ZXtZTFG_0JKV%2F-LH782EFngoP5Jaz7u1i%2F-LH7L0dz8xe8FYdVF5D0%2Fimage.png?alt=media\&token=3350f0ee-c417-4b78-b661-6126fcc8c952)

| **속성**              | **값(공통)**       | **비고**                 |
| ------------------- | --------------- | ---------------------- |
| `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;
}
```

![](https://3440753900-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LH1dN99ZXtZTFG_0JKV%2F-LH782EFngoP5Jaz7u1i%2F-LH7Kil5BnFOFp_fa4Nl%2Fimage.png?alt=media\&token=b27923b3-b35b-45e3-9a98-3984acae99b5)

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

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

![](https://3440753900-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LH1dN99ZXtZTFG_0JKV%2F-LH782EFngoP5Jaz7u1i%2F-LH7L_AoBA2C_9ChDB96%2Fimage.png?alt=media\&token=89ea7f88-088a-4e31-8a91-34e3cb9e7b4c)

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

![](https://3440753900-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LH1dN99ZXtZTFG_0JKV%2F-LH782EFngoP5Jaz7u1i%2F-LH7M1LVKy1gmxz1_Cm6%2Fimage.png?alt=media\&token=6f0aa515-edc7-43d9-802e-bb622627f019)

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

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

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

![](https://3440753900-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LH1dN99ZXtZTFG_0JKV%2F-LH782EFngoP5Jaz7u1i%2F-LH7NBSlB7BlG6o1wHjs%2Fimage.png?alt=media\&token=f801b2ac-3f0e-4887-8ae4-7ed792d015c3)

| **속성**        | **값(공통)**                       |
| ------------- | ------------------------------- |
| `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;
}
```

![](https://3440753900-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LH1dN99ZXtZTFG_0JKV%2F-LH782EFngoP5Jaz7u1i%2F-LH7Nx_NPPSln54p7vTj%2Fimage.png?alt=media\&token=c2f8331c-0e03-4b9b-86b5-14c5d4564c12)

{% 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>

![](https://3440753900-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LH1dN99ZXtZTFG_0JKV%2F-LH782EFngoP5Jaz7u1i%2F-LH7LDuTSa8QsyoRU6v-%2Fimage.png?alt=media\&token=1aaeaadd-0ae2-4f7c-90de-c2d2acf39e3c)

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

![](https://3440753900-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LH1dN99ZXtZTFG_0JKV%2F-LH782EFngoP5Jaz7u1i%2F-LH7Ml_lZUGGWfxL90e1%2Fimage.png?alt=media\&token=ad20d06b-414e-4de7-b946-9a9f7fc19ecb)

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

![](https://3440753900-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LH1dN99ZXtZTFG_0JKV%2F-LH7OA6ph1_ThZICPIj7%2F-LH7OBBFunOrERHUmR_M%2Fimage.png?alt=media\&token=d6585493-1155-4d86-b98d-e9dcdcef5be9)

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