Column Start / End / Span

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-g16 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-g16 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>

Classes #