CSS 그리드에서 두 축을 따른 콘텐츠 정렬

그리드에서는 종종 콘텐츠를 수평 및 수직 축을 따라 동시에 정렬해야 할 때가 있습니다. 이 목적을 위해 이전 강의에서 살펴본 두 가지 속성을 함께 사용할 수 있습니다: justify-content와 align-content입니다.

수직 축 시작점과 수평 축 끝점 기준

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

#parent {
	display: grid;
	justify-content: flex-end;
	align-content: flex-start;
	grid-template-columns: 100px 100px;
	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>

#parent {
	display: grid;
	justify-content: flex-start;
	align-content: flex-end;
	grid-template-columns: 100px 100px;
	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>

#parent {
	display: grid;
	justify-content: center;
	align-content: center;
	grid-template-columns: 100px 100px;
	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;
}

실습 과제

두 개의 열을 가진 그리드를 만들고 여섯 개의 요소를 배치하세요. 요소들을 그리드의 수평 축 시작점과 수직 축 중앙을 기준으로 정렬하세요.

이제 세 개의 열을 가진 그리드를 만들고 요소들을 배치하세요. 그리드의 수평 축 중앙과 수직 축 끝점을 기준으로 요소들을 정렬하세요.

이전 과제를 수정하여, 요소들이 그리드의 수평 축 끝점과 수직 축 중앙을 기준으로 정렬되도록 하세요.