grid-row-start
그리드 아이템이 시작하는 행 라인을 지정합니다. grs{N} 패턴으로 사용하며, gre(grid-row-end)와 조합하여 행 범위를 제어합니다.
클래스 목록
| <tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">패턴 | 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
사용 예시
그리드 아이템의 시작 행 위치를 지정합니다.
<!-- Start at a specific row -->
<div class="dg gtcr3-1fr gtrr3-1fr gap8px">
<div class="grs2">Starts at row line 2</div>
<div class="grs3">Starts at row line 3</div>
</div>
<!-- grs + gre combination for row range -->
<div class="dg gtcr2-1fr gtrr3-1fr gap8px">
<div class="grs1 gre3">Line 1~3 = spans 2 rows</div>
<div>Normal item</div>
<div>Normal item</div>
</div>팁 & 주의사항
grs + gre로 행 범위 지정
grs1 gre3을 조합하면 1번 라인에서 3번 라인까지, 즉 2행을 차지하는 아이템을 만들 수 있습니다.