grid-row-end
Specifies the row line where a grid item ends. Uses the gre{N} pattern, and combining grs1 + gre3 spans 2 rows.
Class List
| Pattern | CSS | Description |
|---|---|---|
gre2 | grid-row-end: 2 | Ends at row line 2 |
gre3 | grid-row-end: 3 | Ends at row line 3 |
gre4 | grid-row-end: 4 | Ends at row line 4 |
gre{N} | grid-row-end: {N} | Ends at row line N |
Visual Examples
An item spanning 2 rows using grs1 gre3 in a 3x3 grid.
grs1 + gre3 -- Lines 1 to 3 (spans 2 rows)
grs1 gre3
2
3
4
5
6
7
Usage Examples
Specifies the end row position of a grid item to control row range.
<!-- Span 2 rows (line 1~3) -->
<div class="dg gtcr2-1fr gtrr3-1fr gap8px">
<div class="grs1 gre3">Spans 2 rows</div>
<div>Normal item</div>
<div>Normal item</div>
</div>
<!-- Sidebar spanning all rows -->
<div class="dg gtc25rem-1fr gtrr3-1fr gap16px">
<aside class="grs1 gre4">Sidebar (full 3 rows)</aside>
<div>Header area</div>
<div>Main Content</div>
<div>Footer area</div>
</div>Tips & Notes
Row range calculation
Rows spanned = gre - grs. Example: grs1 gre4 = 3 rows spanned.
Sidebar pattern
When a sidebar needs to span the full height, set it like grs1 gre4 to span all rows.