CSS로 컨테이너 내부의 전체 그리드 수직 정렬하기
CSS Grid 레이아웃에서 align-content 속성을 사용하면 컨테이너 내부에 배치된 전체 그리드 트랙(행)들을 수직 방향으로 정렬할 수 있습니다. 이 속성은 그리드 컨테이너의 높이가 그리드 아이템들이 차지하는 공간보다 클 때 특히 유용합니다.
align-content 속성의 주요 값
- center – 그리드 트랙을 컨테이너의 수직 중앙에 정렬합니다.
- start – 그리드 트랙을 컨테이너의 시작 지점(위쪽)에 정렬합니다.
- end – 그리드 트랙을 컨테이너의 끝 지점(아래쪽)에 정렬합니다.
- space-between, space-around, space-evenly – 남은 공간을 트랙 사이에 분배합니다.
- stretch – 기본값으로, 트랙 크기를 늘려 컨테이너를 채웁니다.
예제
다음 코드를 실행하면 align-content: center; 속성을 적용해 그리드가 컨테이너 안에서 수직 중앙에 정렬되는 것을 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: grid;
background-color: gray;
align-content: center;
padding: 20px;
grid-gap: 20px;
}
.container > div {
background-color: orange;
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>