CSS grid-row-end 속성이란?
grid-row-end 속성은 CSS Grid 레이아웃에서 그리드 아이템이 행(row) 방향으로 어느 그리드 라인에서 끝나는지 지정하는 속성입니다. 이 속성을 활용하면 특정 아이템이 하나 이상의 행에 걸쳐 배치되도록 유연하게 조절할 수 있습니다.
주요 속성값
- auto (기본값): 아이템이 자동 배치 알고리즘에 따라 배치됩니다.
- 라인 번호: 아이템이 끝나는 그리드 라인 번호를 직접 지정합니다. 예:
grid-row-end: 3; - span <숫자>: 현재 위치부터 지정한 개수만큼의 행에 걸쳐 아이템을 확장합니다. 예:
grid-row-end: span 2; - 라인 이름: 미리 정의된 그리드 라인 이름을 사용할 수 있습니다.
예제 코드
다음 예제는 grid-row-end 속성을 실제로 적용한 코드입니다. 세 번째 그리드 아이템(.ele3)에 grid-row-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-row-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>실행 결과 설명
위 코드를 실행하면 빨간색 배경의 그리드 컨테이너 안에 노란색 아이템들이 배치됩니다. 각 행의 높이는 grid-auto-rows: 50px;로 고정되어 있으며, 아이템 사이에는 10px의 간격(grid-gap)이 적용됩니다.
핵심은 3번 아이템입니다. grid-row-end: span 2;가 적용되어 나머지 아이템(높이 50px)과 달리 두 개의 행에 해당하는 약 110px 높이의 영역을 차지하게 됩니다. 이처럼 grid-row-end 속성을 사용하면 그리드 내에서 특정 아이템의 세로 크기를 손쉽게 제어할 수 있습니다.