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

# align-self

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

열 축을 따라 그리드 아이템 내부 콘텐츠를 정렬합니다. (열 축에 따라 정렬하는 [justify-self](/css-grid/css-grid-guide/grid-align/justify-self.md) 속성과는 반대)

| **속성**       | **값(공통)** | **비고** |
| ------------ | --------- | ------ |
| `align-self` | `start`   |        |
|              | `center`  |        |
|              | `end`     |        |
|              | `stretch` | 기본 값   |

**값**

| **값**     | **설명**                      |
| --------- | --------------------------- |
| `start`   | 그리드 아이템 영역 열 축 시작점에 콘텐츠를 정렬 |
| `center`  | 그리드 아이템 영역 열 축 중앙에 콘텐츠를 정렬  |
| `end`     | 그리드 아이템 영역 행 축 끝점에 콘텐츠를 정렬  |
| `stretch` | 그리드 아이템 영역을 열 축에 가득 채움      |

**예시**

열 축 기준 아이템 내부 콘텐츠 정렬을 시작점으로 설정합니다.

```css
.item-a {
  align-self: start;
}
```

<div align="left"><img src="/files/-LH82sHjDo-1OaeH-TcC" alt=""></div>

열 축 기준 아이템 내부 콘텐츠 정렬을 중앙으로 설정합니다.

```css
.item-a {
  align-self: center;
}
```

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

열 축 기준 아이템 내부 콘텐츠 정렬을 끝점에 설정합니다.

```css
.item-a {
  align-self: end;
}
```

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

열 축 기준 아이템 내부 콘텐츠 정렬을 가득 채움으로 설정합니다.

```css
.item-a {
  align-self: stretch;
}
```

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

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

![](/files/-LH7rwASW1vlnrja1lf9)

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