CSS 그리드에서 수평축 콘텐츠 정렬

그리드에서는 아이템을 배치하는 것뿐만 아니라 그리드의 수평축을 따라 콘텐츠를 정렬해야 할 수도 있습니다. 이 경우 부모 요소에 설정하는 속성 justify-content를 사용합니다. 예제를 통해 이 속성이 어떻게 작동하는지 살펴보겠습니다.

축의 시작점 기준

아이템들을 수평축의 시작점을 기준으로 정렬해 보겠습니다:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: grid;
	justify-content: start;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	grid-gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	grid-gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}

축의 중앙 기준

이번에는 아이템들을 수평축의 중앙을 기준으로 정렬해 보겠습니다:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: grid;
	justify-content: center;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	grid-gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	grid-gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}

축의 끝점 기준

아이템들을 수평축의 끝점을 기준으로 정렬해 보겠습니다:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: grid;
	justify-content: end;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	grid-gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	grid-gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}

실습 과제

두 개의 열로 구성된 그리드를 만들고, 여섯 개의 요소를 배치하세요. 요소들을 그리드 수평축의 시작점을 기준으로 정렬하세요.

이번에는 요소들을 세 개의 열로 배치하고, 그리드 수평축의 중앙을 기준으로 요소들을 정렬하세요.

이전 과제를 변경하여 요소들의 정렬이 그리드 수평축의 끝점을 기준으로 이루어지도록 하세요.