grid-row-end
그리드 아이템이 끝나는 행 라인을 지정합니다. gre{N} 패턴으로 사용하며, grs1 + gre3을 조합하면 2행을 차지합니다.
클래스 목록
| 패턴 | CSS | 설명 |
|---|---|---|
gre2 | grid-row-end: 2 | 2번 행 라인에서 끝남 |
gre3 | grid-row-end: 3 | 3번 행 라인에서 끝남 |
gre4 | grid-row-end: 4 | 4번 행 라인에서 끝남 |
gre{N} | grid-row-end: {N} | N번 행 라인에서 끝남 |
시각적 예시
3x3 그리드에서 grs1 gre3으로 2행을 차지하는 아이템입니다.
grs1 + gre3 — 1번~3번 라인 (2행 차지)
grs1 gre3
2
3
4
5
6
7
사용 예시
그리드 아이템의 끝 행 위치를 지정하여 행 범위를 제어합니다.
<!-- 2행 차지 (라인 1~3) -->
<div class="dg gtcr2-1fr gtrr3-1fr gap8px">
<div class="grs1 gre3">2행 차지</div>
<div>일반 아이템</div>
<div>일반 아이템</div>
</div>
<!-- 사이드바가 전체 행을 관통 -->
<div class="dg gtc25rem-1fr gtrr3-1fr gap16px">
<aside class="grs1 gre4">사이드바 (3행 전체)</aside>
<div>헤더 영역</div>
<div>메인 콘텐츠</div>
<div>푸터 영역</div>
</div>팁 & 주의사항
행 범위 계산
차지하는 행 수 = gre - grs. 예: grs1 gre4 = 3행 차지.
사이드바 패턴
사이드바가 전체 높이를 차지해야 할 때 grs1 gre4처럼 모든 행을 관통하도록 설정합니다.