align-items

사용법

열(column) 축을 따라 그리드 아이템 내부 콘텐츠를 정렬합니다. (justify-items 속성의 반대) 이 설정은 그리드 컨테이너 내부 모든 그리드 아이템에 적용됩니다.

속성	값	비고
align-items	start
	center
	end
	stretch	기본 값

값

• start: 그리드 영역의 시작점에 콘텐츠 정렬

• center: 그리드 영역의 끝점에 콘텐츠 정렬

• end: 그리드 영역의 중앙에 콘텐츠 정렬

• stretch: 그리드 영역 전체 너비를 채움 (기본 값)

예시

.grid-container {
  align-items: start;
}

.grid-container {
  align-items: center;
}

.grid-container {
  align-items: end;
}

.grid-container {
  align-items: stretch;
}

개별 그리드 아이템에 행축 콘텐츠 정렬 속성을 적용하려면 align-self 속성을 사용합니다.

레퍼런스

CSS Grid Layout Module Level 1

w3.org/TR/css-grid-1/#column-align