CSS의 grid-column-end 속성은 그리드 레이아웃에서 특정 아이템이 몇 번째 그리드 선(column line)에서 끝나는지를 지정합니다. 이 속성을 사용하면 아이템이 차지할 열의 범위를 정확하게 제어할 수 있어, 복잡한 레이아웃을 손쉽게 구성할 수 있습니다.
grid-column-end의 주요 값
- auto – 기본값으로, 아이템이 자동 배치 규칙에 따라 배치됩니다.
- <line> – 아이템이 끝나는 그리드 선의 번호를 직접 지정합니다. (예:
grid-column-end: 3;) - span <number> – 시작 위치부터 지정한 개수만큼의 트랙을 차지하도록 설정합니다. (예:
grid-column-end: span 2;)
예제 코드
아래 코드에서는 세 번째 요소(.ele3)에 grid-column-end: span 2;를 적용하여, 해당 아이템이 두 개의 열에 걸쳐 배치되도록 했습니다.
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: grid;
grid-auto-rows: 50px;
grid-gap: 10px;
background-color: red;
padding: 10px;
}
.container>div {
background-color: yellow;
text-align: center;
padding:10px 0;
font-size: 20px;
}
.ele3 {
grid-column-end: span 2;
}
</style>
</head>
<body>
<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>실행 결과
위 코드를 실행하면 빨간색 배경의 그리드 컨테이너 안에 노란색 아이템들이 배치되며, 3번 아이템은 다른 아이템보다 두 배 넓은 영역(2개 열)을 차지하게 됩니다. 이처럼 grid-column-end 속성은 grid-column-start와 함께 사용하면 더욱 정교한 그리드 배치가 가능합니다.