grid-row-start
Specifies the row line where a grid item starts. Uses the grs{N} pattern, combined with gre(grid-row-end) to control row range.
Class List
| Pattern | CSS | Description |
|---|---|---|
grs1 | grid-row-start: 1 | Starts at row line 1 |
grs2 | grid-row-start: 2 | Starts at row line 2 |
grs3 | grid-row-start: 3 | Starts at row line 3 |
grs{N} | grid-row-start: {N} | Starts at row line N |
Visual Examples
Example of specifying the starting row line of an item in a 3x3 grid.
grs2 -- Starts at row line 2
1
2
3
grs2
5
6
7
8
Usage Examples
Specifies the starting row position of a grid item.
<!-- 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>Tips & Notes
Specifying row range with grs + gre
Combining grs1 gre3 spans from line 1 to line 3, i.e., 2 rows.