# justify-items

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

행(row) 축을 따라 그리드 아이템 내부 콘텐츠를 정렬합니다. ([`align-items`](column-axis) 속성의 반대)\
이 설정은 그리드 컨테이너 내부 모든 그리드 아이템에 적용됩니다.

| **속성**          | **값**     | **비고** |
| --------------- | --------- | ------ |
| `justify-items` | `start`   |        |
|                 | `center`  |        |
|                 | `end`     |        |
|                 | `stretch` | 기본 값   |

**값**

* **start**: 그리드 영역의 시작점에 콘텐츠 정렬
* **center**: 그리드 영역의 끝점에 콘텐츠 정렬
* **end**: 그리드 영역의 중앙에 콘텐츠 정렬
* **stretch**: 그리드 영역 전체 너비를 채움 (기본 값)

**예시**

```css
.grid-container {
  justify-items: start;
}
```

<div align="left"><img src="https://3440753900-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LH1dN99ZXtZTFG_0JKV%2F-LH7aWmRD8YDXkXoHNQD%2F-LH7jTYzIe7Iv8nnZeyE%2Fimage.png?alt=media&#x26;token=c2f15874-cf66-4228-a51b-ff0b45bb9bcd" alt=""></div>

```css
.grid-container {
  justify-items: center;
}
```

<div align="left"><img src="https://3440753900-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LH1dN99ZXtZTFG_0JKV%2F-LH7aWmRD8YDXkXoHNQD%2F-LH7jcbp0jOPwxrGrdeW%2Fimage.png?alt=media&#x26;token=4e88a2c2-7064-49d5-a676-e6b1c4ec44a7" alt=""></div>

```css
.grid-container {
  justify-items: end;
}
```

<div align="left"><img src="https://3440753900-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LH1dN99ZXtZTFG_0JKV%2F-LH7aWmRD8YDXkXoHNQD%2F-LH7pUwsR7xkeMA2hJx9%2Fimage.png?alt=media&#x26;token=0e7b0181-61db-4fd5-94d8-33fbf879d064" alt=""></div>

```css
.grid-container {
  justify-items: stretch;
}
```

<div align="left"><img src="https://3440753900-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LH1dN99ZXtZTFG_0JKV%2F-LH7aWmRD8YDXkXoHNQD%2F-LH7pdxrFZ9_P0MAOk5L%2Fimage.png?alt=media&#x26;token=3a07d05b-ecd1-4986-956e-9276bb4d35d1" alt=""></div>

{% hint style="info" %}
개별 그리드 아이템에 행축 콘텐츠 정렬 속성을 적용하려면 justify-self 속성을 사용합니다.
{% endhint %}

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

![](https://3440753900-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LH1dN99ZXtZTFG_0JKV%2F-LH7aWmRD8YDXkXoHNQD%2F-LH7qArmuwdsWWl7mVtC%2Fimage.png?alt=media\&token=5c621aef-24a6-43f2-88e7-5726007cc255)

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