CSS grid-row 속성이란?
CSS Grid 레이아웃에서 grid-row 속성은 그리드 아이템이 차지할 행(row)의 크기와 위치를 지정하는 데 사용됩니다. 이 속성은 grid-row-start와 grid-row-end, 두 개의 개별 속성을 하나로 묶은 단축(shorthand) 속성으로, 아이템이 어느 라인에서 시작하여 어느 라인에서 끝날지 한 번에 정의할 수 있습니다.
기본 문법
grid-row 속성은 슬래시(/)를 기준으로 시작 라인과 끝 라인을 구분하여 작성합니다.
grid-row: 시작_라인 / 끝_라인;
사용 가능한 주요 값
- auto: 기본값으로, 아이템이 그리드 흐름에 따라 자동 배치됩니다.
- 라인 번호: 그리드 라인의 번호를 직접 지정하여 시작과 끝 위치를 결정합니다.
- span n: 현재 위치에서 n개의 행을 차지하도록 아이템을 확장합니다.
예제 코드
아래 예제에서는 첫 번째 그리드 아이템(.ele1)에 grid-row: 1 / 6;을 적용했습니다. 이렇게 하면 해당 아이템이 1번 라인부터 6번 라인까지, 즉 총 5개의 행에 걸쳐 세로로 길게 배치됩니다.
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: grid;
background-color: green;
grid-template-columns: auto auto;
padding: 20px;
grid-gap: 10px;
}
.container > div {
background-color: orange;
text-align: center;
padding: 10px 0;
font-size: 20px;
}
.ele1 {
grid-row: 1 / 6;
}
</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>실행 결과 해설
위 코드를 실행하면 초록색 배경의 그리드 컨테이너 안에서 첫 번째 아이템이 여러 행에 걸쳐 세로로 길게 표시되고, 나머지 아이템들(2~6번)은 남은 공간에 자동으로 배치되는 것을 확인할 수 있습니다. 이처럼 grid-row 속성을 활용하면 복잡한 게임 보드, 대시보드, 매거진 레이아웃 등 다양한 구조의 그리드 디자인을 손쉽게 구현할 수 있습니다.