#Grid Span
These classes are utility classes for determining how elements are located and stretched across the grid.
#Spanning Elements
These are utility classes used for specifying how
Columns
Use grid-c-* where '*' is any integer from 1 through 12 inclusive to specify how many columns an element should span.
1
grid-c-2
grid-c-3
grid-c-4
grid-c-5
grid-c-6
grid-c-7
grid-c-8
grid-c-9
grid-c-10
grid-c-11
grid-c-12
<div class="grid u-gap-2">
<div class="grid-c-1"><span>1</span></div>
<div class="grid-c-11"></div>
<div class="grid-c-2"><span>grid-c-2</span></div>
<div class="grid-c-10"></div>
<div class="grid-c-3"><span>grid-c-3</span></div>
<div class="grid-c-9"></div>
<div class="grid-c-4"><span>grid-c-4</span></div>
<div class="grid-c-8"></div>
<div class="grid-c-5"><span>grid-c-5</span></div>
<div class="grid-c-7"></div>
<div class="grid-c-6"><span>grid-c-6</span></div>
<div class="grid-c-7"><span>grid-c-7</span></div>
<div class="grid-c-8"><span>grid-c-8</span></div>
<div class="grid-c-9"><span>grid-c-9</span></div>
<div class="grid-c-10"><span>grid-c-10</span></div>
<div class="grid-c-11"><span>grid-c-11</span></div>
<div class="grid-c-12"><span>grid-c-12</span></div>
</div>Let's use a small example with a grid of 3 columns.
<div class="grid grid-cols-3 u-gap-2">
<div class="grid-c-2 py-4 bg-indigo-200"></div>
<div class="py-4 bg-purple-200"></div>
<div class="grid-c-3 py-4 bg-purple-200"></div>
<div class="grid-c-1 py-4 bg-indigo-200"></div>
<div class="grid-c-1 py-4 bg-purple-200"></div>
<div class="grid-c-1 py-4 bg-indigo-200"></div>
</div>Rows
Like what is shown above for columns, the same applies for spanning rows -- this time using the grid-r-* class.
grid-r-1
grid-r-2
grid-r-3
grid-r-4
grid-r-5
grid-r-6
grid-r-7
grid-r-8
grid-r-9
grid-r-10
grid-r-11
grid-r-12
<div class="grid u-gap-2" style="height: 500px;">
<div class="grid-r-1 level"><span>grid-r-1</span></div>
<div class="grid-r-2 level"><span>grid-r-2</span></div>
<div class="grid-r-3 level"><span>grid-r-3</span></div>
<div class="grid-r-4 level"><span>grid-r-4</span></div>
<div class="grid-r-5 level"><span>grid-r-5</span></div>
<div class="grid-r-6 level"><span>grid-r-6</span></div>
<div class="grid-r-7 level"><span>grid-r-7</span></div>
<div class="grid-r-8 level"><span>grid-r-8</span></div>
<div class="grid-r-9 level"><span>grid-r-9</span></div>
<div class="grid-r-10 level"><span>grid-r-10</span></div>
<div class="grid-r-11 level"><span>grid-r-11</span></div>
<div class="grid-r-12 level"><span>grid-r-12</span></div>
</div>#Start / End
For greater control, you can explicitly specify the start and end for either a row or column.
Columns
To specify the starting column position for an element, use the grid-cs-* class. The cs stands for column start.
To specify the starting column position for an element, use the grid-ce-* class. The cs stands for column end.
As stated prior, the '*' represents any number from 1 to 12 inclusive.
2-7
1-4
6 - end
<div class="grid u-gap-2">
<div class="grid-cs-2 grid-ce-7">2-7</div>
<div class="grid-cs-1 grid-ce-4">1-4</div>
<div class="grid-c-5"></div>
<div class="grid-cs-6 grid-ce-end">6 - end</div>
</div>In addition to these classes, there are also additional helper classes.
grid-ce-end | Extends grid element to take up remaining width. |
grid-ce-auto | Auto adjusts element width span. |
Rows
To specify the starting column position for an element, use the grid-rs-* class. The cs stands for row start.
To specify the starting column position for an element, use the grid-re-* class. The cs stands for row end.
10-12
8-12
6-12
4-12
2-12
4-12
6-12
8-12
10-12
<div class="grid grid-cols-9 u-gap-2">
<div class="grid-rs-10 grid-re-12">10-12</div>
<div class="grid-rs-8 grid-re-12">8-12</div>
<div class="grid-rs-6 grid-re-12">6-12</div>
<div class="grid-rs-4 grid-re-12">4-12</div>
<div class="grid-rs-2 grid-re-12">2-12</div>
<div class="grid-rs-4 grid-re-12">4-12</div>
<div class="grid-rs-6 grid-re-12">6-12</div>
<div class="grid-rs-8 grid-re-12">8-12</div>
<div class="grid-rs-10 grid-re-12">10-12</div>
</div>In addition to these classes, there are also additional helper classes.
grid-re-end | Extends grid element to take up remaining height. |
grid-re-auto | Auto adjusts element height span. |
#Variants
By default, grid is preset with 12 individual columns horizontally with a variable amount of rows. This value can be changed in the framework as well by modifying the grid count inside _config.scss.
To learn more about how to configure what clases are generated for grid spans, refer to the Grid Variants docs.