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-g-200 d-g-cols4 d-w100p d-hmn216 d-bar-400 d-bgc-moderate"> <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bgc-moderate-opaque d-bar-300">1</dt-stack> <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bgc-moderate-opaque d-bar-300">2</dt-stack> <dt-stack direction="row" align="center" justify="center" class="d-gc2 d-p-200 d-bgc-bold-opaque d-bar-300">3</dt-stack> <dt-stack direction="row" align="center" justify="center" class="d-gc2 d-p-200 d-bgc-bold-opaque d-bar-300">4</dt-stack> <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bgc-moderate-opaque d-bar-300">5</dt-stack> <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bgc-moderate-opaque d-bar-300">6</dt-stack> <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bgc-moderate-opaque d-bar-300">7</dt-stack> <dt-stack direction="row" align="center" justify="center" class="d-gc3 d-p-200 d-bgc-bold-opaque d-bar-300">8</dt-stack> <dt-stack direction="row" align="center" justify="center" class="d-gc-full d-p-200 d-bgc-bold-opaque d-bar-300">9</dt-stack> </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-g-200 d-g-cols6 d-w100p d-hmn216 d-bar-400 d-bgc-moderate"> <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bgc-moderate-opaque d-bar-300"></dt-stack> <dt-stack direction="row" align="center" justify="center" class="d-gcs2 d-gce6 d-p-200 d-bgc-bold-opaque d-bar-300">1</dt-stack> <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bgc-moderate-opaque d-bar-300"></dt-stack> <dt-stack direction="row" align="center" justify="center" class="d-gcs1 d-gce5 d-p-200 d-bgc-bold-opaque d-bar-300">2</dt-stack> <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bgc-moderate-opaque d-bar-300"></dt-stack> <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bgc-moderate-opaque d-bar-300"></dt-stack> <dt-stack direction="row" align="center" justify="center" class="d-gcs1 d-gce7 d-p-200 d-bgc-bold-opaque d-bar-300">3</dt-stack> </div>
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; |