> 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-align/row-axis.md).

# justify-items

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

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

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

**값**

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

**예시**

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

<div align="left"><img src="/files/-LH7jTYzIe7Iv8nnZeyE" alt=""></div>

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

<div align="left"><img src="/files/-LH7jcbp0jOPwxrGrdeW" alt=""></div>

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

<div align="left"><img src="/files/-LH7pUwsR7xkeMA2hJx9" alt=""></div>

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

<div align="left"><img src="/files/-LH7pdxrFZ9_P0MAOk5L" alt=""></div>

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

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

![](/files/-LH7qArmuwdsWWl7mVtC)

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