> 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-content.md).
# align-content
## 사용법
그리드 컨테이너의 크기보다 작은 그리드 아이템 트랙(`px`와 같은 고정 단위로 설정된 경우)의 크기라면, 아이템 트랙을 정렬할 수 있습니다. 이 속성은 열(column) 축을 따라 그리드 아이템 트랙을 정렬합니다. ([`justify-content`](/css-grid/css-grid-guide/grid-align/justify-content.md) 속성의 반대)
| **속성** | **값** |
| --------------- | --------------- |
| `align-content` | `start` |
| | `center` |
| | `end` |
| | `stretch` |
| | `space-around` |
| | `space-between` |
| | `space-evenly` |
**값**
* **start**: \
그리드 컨테이너 영역의 시작점에 아이템 트랙을 정렬
* **center**: \
그리드 컨테이너 영역의 중앙에 아이템 트랙을 정렬
* **end**: \
그리드 컨테이너 영역의 끝점에 아이템 트랙을 정렬
* **stretch**: \
그리드 컨테이너 영역을 아이템 트랙 크기를 조정하여 채움
* **space-around**: \
그리드 컨테이너의 남은 영역을 아이템 트랙(열)이 좌/우 공간으로 나눔\
(양 가장자리 공간은 아이템 그룹 사이 간격의 1/2)
* **space-between**: \
그리드 컨테이너 영역의 양 가장자리 공백 없이, 아이템 트랙(열) 사이 공간을 나눔
* **space-evenly**: \
`space-around`와 비슷해보이지만, 공간을 모두 동일하게 나누는 점이 다름 \
(아래 예시 그림 참조)
**예시**
```css
.grid-container {
align-content: start;
}
```
```css
.grid-container {
align-content: center;
}
```
```css
.grid-container {
align-content: end;
}
```
```css
.grid-container {
align-content: stretch;
}
```
```css
.grid-container {
align-content: space-around;
}
```
```css
.grid-container {
align-content: space-between;
}
```
```css
.grid-container {
align-content: space-evenly;
}
```
## 레퍼런스
{% embed url="" %}
w3.org/TR/css-grid-1/#grid-align
{% endembed %}
