Column Start / End / Span
Utilities for controlling how elements are placed across grid columns.
Classes
| Class | Output |
|---|---|
| .d-gcs1 | grid-column-start: 1 |
| .d-gcs2 | grid-column-start: 2 |
| .d-gcs3 | grid-column-start: 3 |
| .d-gcs4 | grid-column-start: 4 |
| .d-gcs5 | grid-column-start: 5 |
| .d-gcs6 | grid-column-start: 6 |
| .d-gcs7 | grid-column-start: 7 |
| .d-gcs8 | grid-column-start: 8 |
| .d-gcs9 | grid-column-start: 9 |
| .d-gcs10 | grid-column-start: 10 |
| .d-gcs11 | grid-column-start: 11 |
| .d-gcs12 | grid-column-start: 12 |
| .d-gcs-auto | grid-column-start: auto !important; |
| .d-gcs-unset | grid-column-start: unset !important; |
| .d-gce1 | grid-column-end: 1 |
| .d-gce2 | grid-column-end: 2 |
| .d-gce3 | grid-column-end: 3 |
| .d-gce4 | grid-column-end: 4 |
| .d-gce5 | grid-column-end: 5 |
| .d-gce6 | grid-column-end: 6 |
| .d-gce7 | grid-column-end: 7 |
| .d-gce8 | grid-column-end: 8 |
| .d-gce9 | grid-column-end: 9 |
| .d-gce10 | grid-column-end: 10 |
| .d-gce11 | grid-column-end: 11 |
| .d-gce12 | grid-column-end: 12 |
| .d-gce-auto | grid-column-end: auto !important; |
| .d-gce-unset | grid-column-end: unset !important; |
| .d-gc1 | grid-column: span 1 / span 1 |
| .d-gc2 | grid-column: span 2 / span 2 |
| .d-gc3 | grid-column: span 3 / span 3 |
| .d-gc4 | grid-column: span 4 / span 4 |
| .d-gc5 | grid-column: span 5 / span 5 |
| .d-gc6 | grid-column: span 6 / span 6 |
| .d-gc7 | grid-column: span 7 / span 7 |
| .d-gc8 | grid-column: span 8 / span 8 |
| .d-gc9 | grid-column: span 9 / span 9 |
| .d-gc10 | grid-column: span 10 / span 10 |
| .d-gc11 | grid-column: span 11 / span 11 |
| .d-gc12 | grid-column: span 12 / span 12 |
| .d-gc-full | grid-column: 1 / -1 !important; |
| .d-gc-auto | grid-column: auto !important; |
| .d-gc-unset | grid-column: unset !important; |
Spanning columns
Use d-gc{#} to span an element across multiple columns. This can be combined with d-gc{#} classes to span a set of columns. Use d-gce{#} to set an element's ending point. A reminder that CSS grid columns start at 1 and end at the number of columns + 1. For example in a 3-column grid, the starting line would be 1 and the ending line would be 4.
<div class="d-d-grid d-gg16 d-g-cols4">
<div>1</div>
<div>2</div>
<div class="d-gc2">3</div>
<div class="d-gc2">4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div class="d-gc3">8</div>
<div class="d-gc-full">9</div>
</div>
Setting the starting and ending column
Use d-gcs{#} to set the starting point for an element. This can be combined with d-gc{#} classes to span a set of columns.
<div class="d-d-grid d-gg16 d-g-cols6">
<div class="d-gcs2 d-gce6">1</div>
<div class="d-gcs1 d-gce5">2</div>
<div class="d-gcs1 d-gce7">3</div>
</div>