7.2.3 그리드 레이아웃의 정렬 속성
그리드 아이템을 정렬할 수 있는 속성을 살펴보겠습니다.
● align-items와 align-self 속성
align-items 속성을 사용하면 그리드 셀의 높이가 그리드 아이템보다 클 때 각 그리드 아이템을 각 그리드 셀의 세로 방향으로 정렬할 수 있습니다. 사용하는 속성값은 다음 표와 같습니다.
표 7-5 align-items 속성값
|
속성값 |
설명 |
|
stretch |
그리드 아이템이 그리드 셀을 꽉 채우도록 크기를 늘립니다. |
|
start |
그리드 아이템을 그리드 셀의 맨 위에 배치합니다. |
|
center |
그리드 아이템을 그리드 셀의 세로 방향 중간에 배치합니다 |
|
end |
그리드 아이템을 그리드 셀의 맨 아래에 배치합니다. |
다음은 align-items 속성을 적용한 예제 코드입니다.
07/02/grid-align-items.html
.grid-container{
(중략)
align-items:stretch; /* start, center, end */
}