CSS에서 grid-column-end 속성을 사용하면 그리드 아이템이 몇 번째 열에서 끝나는지, 즉 종료 위치를 지정할 수 있습니다. 이 속성은 grid-column-start와 함께 사용되어 아이템이 차지할 열 범위를 정밀하게 제어하는 데 활용됩니다.
주요 사용 방식
- span 키워드:
grid-column-end: span 2;처럼 작성하면 해당 아이템이 2개의 열에 걸쳐 배치됩니다. - 그리드 라인 번호:
grid-column-end: 4;처럼 특정 라인 번호를 지정하여 그 라인에서 아이템이 끝나도록 설정할 수 있습니다.
예제
아래 예제에서는 세 번째 아이템(.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>코드 설명
.container클래스는display: grid;로 그리드 컨테이너를 정의하고, 각 행의 높이를 50px로, 아이템 사이 간격을 10px로 설정합니다..ele3클래스에grid-column-end: span 2;가 적용되어 세 번째 아이템이 두 개의 열 폭만큼 확장됩니다.- 결과적으로 3번 아이템은 일반 아이템보다 가로로 길게 렌더링되며, 뒤따르는 아이템들은 자동으로 재배치됩니다.
이처럼 grid-column-end 속성을 활용하면 복잡한 레이아웃에서도 아이템의 열 배치를 유연하게 조정할 수 있습니다.