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-gcs0 grid-column-start: 0
.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-gce0 grid-column-end: 0
.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-gc0 grid-column: span 0 / span 0
.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.

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.