justify-items 속성

justify-items 속성은 그리드 셀 내부 요소의 수평 축 정렬을 지정합니다. 정렬은 브라우저 디버거에서 그리드를 볼 때 가장 명확하게 확인할 수 있습니다. 부모 요소에 적용됩니다.

구문

selector {
	justify-items: flex-start | flex-end | center ;
}

값

값	설명
`flex-start`	요소가 수평 축의 시작점에 붙습니다.
`flex-end`	블록이 수평 축의 끝점에 붙습니다.
`center`	블록이 수평 축의 중앙에 위치합니다.

예제 . 수평 축 시작점 기준 정렬

셀 내부 요소를 수평 축 시작점 기준으로 정렬해 보겠습니다:

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

#parent {
	display: grid;
	justify-items: start;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	gap: 10px;
	padding: 10px;
	height: 200px;
	width: 400px;
	border: 2px solid #696989;
}
#parent > div {
	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-items: center;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	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-items: end;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}

이제 디버거를 통해 그리드를 확인해 보세요:

참고 항목

교차 축 정렬을 지정하는 속성 align-items
그리드 셀 내부 요소 정렬을 지정하는 속성 place-items