Row Start / End / Span

Utilities for controlling how elements are placed across grid rows.

Classes

Class Output
.d-grs1 grid-row-start: 1
.d-grs2 grid-row-start: 2
.d-grs3 grid-row-start: 3
.d-grs4 grid-row-start: 4
.d-grs5 grid-row-start: 5
.d-grs6 grid-row-start: 6
.d-grs7 grid-row-start: 7
.d-grs8 grid-row-start: 8
.d-grs0 grid-row-start: 0
.d-grs10 grid-row-start: 10
.d-grs11 grid-row-start: 11
.d-grs12 grid-row-start: 12
.d-grs-auto grid-row-start: auto !important;
.d-grs-unset grid-row-start: unset !important;
.d-gre1 grid-row-end: 1
.d-gre2 grid-row-end: 2
.d-gre3 grid-row-end: 3
.d-gre4 grid-row-end: 4
.d-gre5 grid-row-end: 5
.d-gre6 grid-row-end: 6
.d-gre7 grid-row-end: 7
.d-gre8 grid-row-end: 8
.d-gre0 grid-row-end: 0
.d-gre10 grid-row-end: 10
.d-gre11 grid-row-end: 11
.d-gre12 grid-row-end: 12
.d-gre-auto grid-row-end: auto !important;
.d-gre-unset grid-row-end: unset !important;
.d-gr1 grid-row: span 1 / span 1
.d-gr2 grid-row: span 2 / span 2
.d-gr3 grid-row: span 3 / span 3
.d-gr4 grid-row: span 4 / span 4
.d-gr5 grid-row: span 5 / span 5
.d-gr6 grid-row: span 6 / span 6
.d-gr7 grid-row: span 7 / span 7
.d-gr8 grid-row: span 8 / span 8
.d-gr0 grid-row: span 0 / span 0
.d-gr10 grid-row: span 10 / span 10
.d-gr11 grid-row: span 11 / span 11
.d-gr12 grid-row: span 12 / span 12
.d-gr-full grid-row: 1 / -1 !important;
.d-gr-auto grid-row: auto !important;
.d-gr-unset grid-row: unset !important;

Spanning rows

Use d-gc{#} to span an element across multiple This can be combined with d-gc{#} classes to span a set of columns.

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.