align-self

사용법

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

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

값

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

예시

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

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

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

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

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

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

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

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

레퍼런스

CSS Grid Layout Module Level 1

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