7.2.3 그리드 레이아웃의 정렬 속성

그리드 아이템을 정렬할 수 있는 속성을 살펴보겠습니다.

● align-items와 align-self 속성

align-items 속성을 사용하면 그리드 셀의 높이가 그리드 아이템보다 클 때 각 그리드 아이템을 각 그리드 셀의 세로 방향으로 정렬할 수 있습니다. 사용하는 속성값은 다음 표와 같습니다.

표 7-5 align-items 속성값

다음은 align-items 속성을 적용한 예제 코드입니다.

.grid-container{
  (중략)
  align-items:stretch; /* start, center, end */
}