CSS의 grid-row-start 속성은 그리드 레이아웃에서 특정 아이템이 몇 번째 행(row)부터 시작할지 지정하는 데 사용됩니다. 이 속성을 활용하면 그리드 아이템의 세로 위치를 자유롭게 제어할 수 있어, 복잡한 레이아웃도 손쉽게 구성할 수 있습니다.
grid-row-start 속성의 기본 문법
속성의 기본 문법은 다음과 같습니다.
grid-row-start: auto | <line-number> | span <number> | <name>;
- auto: 기본값으로, 아이템이 자동 배치 알고리즘에 따라 배치됩니다.
- <line-number>: 그리드 행의 시작 라인 번호를 직접 지정합니다.
- span <number>: 현재 위치에서 지정한 수만큼의 트랙을 차지합니다.
- <name>: 이름이 부여된 그리드 라인을 참조하여 배치합니다.
실습 예제
아래 코드를 실행하면 grid-row-start 속성이 실제로 어떻게 동작하는지 확인할 수 있습니다. 첫 번째 아이템(.ele1)이 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;
}
.ele1 {
grid-row-start: 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를 통해 그리드 컨테이너로 설정되었으며, grid-auto-rows: 50px로 각 행의 높이가 50px로 고정되었습니다. 또한 grid-gap: 10px로 아이템 사이에 10px의 간격이 적용됩니다.
핵심은 .ele1에 적용된 grid-row-start: 2입니다. 이 설정에 따라 첫 번째 아이템은 1번째 행이 아닌 2번째 행 라인부터 배치됩니다. 나머지 아이템들은 자동 배치(auto-placement) 규칙에 따라 남은 공간을 순서대로 채워나갑니다.
이처럼 grid-row-start 속성을 사용하면 특정 아이템의 시작 위치를 명확하게 제어할 수 있어, 매거진형 레이아웃이나 대시보드 UI처럼 정교한 배치가 필요한 디자인을 구현할 때 매우 유용합니다.