justify-content

사용법

그리드 컨테이너의 크기보다 작은 그리드 아이템 트랙(px와 같은 고정 단위로 설정된 경우)의 크기라면, 아이템 트랙을 정렬할 수 있습니다. 이 속성은 행(row) 축을 따라 그리드 아이템 트랙을 정렬합니다. (align-content 속성의 반대)

속성	값
justify-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와 비슷해보이지만, 공간을 모두 동일하게 나누는 점이 다름 (아래 예시 그림 참조)

예시

.grid-container {
  justify-content: start;
}

.grid-container {
  justify-content: center;
}

.grid-container {
  justify-content: end;
}

.grid-container {
  justify-content: stretch;
}

.grid-container {
  justify-content: space-around;
}

.grid-container {
  justify-content: space-between;
}

.grid-container {
  justify-content: space-evenly;
}

레퍼런스

CSS Grid Layout Module Level 1www.w3.org

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