Row Start / End / Span
Utilities for controlling how elements are placed across grid rows.
Spanning Rows
Use d-gr{#} to span an element across multiple rows. This can be combined with d-gc{#} classes to span a set of columns.
<div class="d-d-grid d-g16 d-g-cols3 d-g-rows3">
<div class="d-gc2 d-gr2">1</div>
<div>2</div>
<div class="d-gr2">3</div>
<div class="d-gc2">4</div>
</div>
Setting the Starting and Ending Rows
Use d-grs{#} to set the starting point for an element. This can be combined with d-gc{#} classes to span a set of columns.
Use d-gre{#} to set an element's ending point. A reminder that CSS grid rows start at 1 and end at the number of rows + 1. For example in a 4-row grid, the starting line would be 1 and the ending line would be 5.
<div class="d-d-grid d-g16 d-g-cols3 d-g-rows4">
<div class="d-gc2 d-grs1 d-gre3">1</div>
<div>2</div>
<div class="d-grs2 d-gre5">3</div>
<div class="d-gc2 d-gr2">4</div>
</div>