CSS 그리드 레이아웃에서 justify-content 속성을 사용하면 컨테이너 안에서 그리드 트랙(열) 전체를 원하는 방식으로 정렬할 수 있습니다. 이 속성은 그리드 컨테이너의 인라인 방향(기본적으로 가로 방향)에 남는 공간이 있을 때, 그 여유 공간을 어떻게 분배할지 결정합니다.
justify-content의 주요 값
- start – 그리드 트랙을 컨테이너의 시작 부분에 배치합니다.
- end – 그리드 트랙을 컨테이너의 끝 부분에 배치합니다.
- center – 그리드 트랙을 컨테이너 중앙에 배치합니다.
- space-between – 첫 번째와 마지막 트랙은 양 끝에 붙이고, 나머지 여백은 균등하게 분배합니다.
- space-around – 각 트랙 주위에 동일한 여백을 배치합니다(양 끝 여백은 절반 크기).
- space-evenly – 트랙 사이와 양 끝을 포함해 모든 여백을 완전히 균등하게 분배합니다.
아래 예제에서는 justify-content: space-evenly를 적용하여 게임 보드 형태의 그리드 항목들이 컨테이너 안에서 균등하게 정렬되도록 구현했습니다.
예제 코드
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: grid;
background-color: gray;
grid-template-rows: 120px 90px 100px;
justify-content: space-evenly;
padding: 20px;
grid-gap: 20px;
}
.container > div {
background-color: yellow;
border: 2px solid gray;
padding: 35px;
font-size: 30px;
text-align: center;
}
</style>
</head>
<body>
<h1>Game Board</h1>
<div class="container">
<div class="ele1">1</div>
<div class="ele2">2</div>
<div class="ele3">3</div>
<div class="ele4">4</div>
<div class="ele5">5</div>
<div class="ele6">6</div>
</div>
</body>
</html>
코드 설명
.container 클래스에 display: grid를 선언해 그리드 컨테이너를 만들고, grid-template-rows로 세 개의 행 높이(120px, 90px, 100px)를 지정했습니다. justify-content: space-evenly 덕분에 열 트랙들이 컨테이너 내부에서 좌우 여백까지 포함해 균등하게 배치됩니다. 또한 grid-gap: 20px로 항목 사이 간격을 일정하게 유지하고, 자식 요소에는 노란색 배경과 회색 테두리를 적용해 시각적으로 구분하기 쉽게 했습니다.
참고로 세로 방향(블록 축)의 정렬이 필요하다면 align-content 속성을 사용하면 되며, 이 속성 역시 justify-content와 동일한 값을 사용할 수 있습니다.