grid-row-start
그리드 아이템이 시작하는 행 라인을 지정합니다. grs{N} 패턴으로 사용하며, gre(grid-row-end)와 조합하여 행 범위를 제어합니다.
클래스 목록
| 패턴 | CSS | 설명 |
|---|---|---|
grs1 | grid-row-start: 1 | 1번 행 라인에서 시작 |
grs2 | grid-row-start: 2 | 2번 행 라인에서 시작 |
grs3 | grid-row-start: 3 | 3번 행 라인에서 시작 |
grs{N} | grid-row-start: {N} | N번 행 라인에서 시작 |
시각적 예시
3x3 그리드에서 아이템의 시작 행 라인을 지정한 예시입니다.
grs2 — 2번 행 라인에서 시작
1
2
3
grs2
5
6
7
8
사용 예시
그리드 아이템의 시작 행 위치를 지정합니다.
<!-- 특정 행에서 시작 -->
<div class="dg gtcr3-1fr gtrr3-1fr gap8px">
<div class="grs2">2번 행 라인에서 시작</div>
<div class="grs3">3번 행 라인에서 시작</div>
</div>
<!-- grs + gre 조합으로 행 범위 지정 -->
<div class="dg gtcr2-1fr gtrr3-1fr gap8px">
<div class="grs1 gre3">1~3 라인 = 2행 차지</div>
<div>일반 아이템</div>
<div>일반 아이템</div>
</div>팁 & 주의사항
grs + gre로 행 범위 지정
grs1 gre3을 조합하면 1번 라인에서 3번 라인까지, 즉 2행을 차지하는 아이템을 만들 수 있습니다.