#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-[1-12] to specify how many columns an element should span.
| Class | Styles |
|---|---|
grid-c-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 | |
Supported Pseudo-Variants
active
checked
dark
disabled
first-of-type
focus
focus-visible
focus-within
group-focus
group-hover
hover
landscape
last-of-type
light
portrait
reduce-motion
responsive
visited
See more pseudo-variants.
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-[1-6] class.
| Class | Styles |
|---|---|
grid-r-1 | |
grid-r-2 | |
grid-r-3 | |
grid-r-4 | |
grid-r-5 | |
grid-r-6 | |
Supported Pseudo-Variants
active
checked
dark
disabled
first-of-type
focus
focus-visible
focus-within
group-focus
group-hover
hover
landscape
last-of-type
light
portrait
reduce-motion
responsive
visited
See more pseudo-variants.
grid-r-1
grid-r-2
grid-r-3
grid-r-4
grid-r-5
grid-r-6
<div class="grid grid-cols-6 u-gap-2" style="height: 500px;">
<div class="grid-r-1"><span>grid-r-1</span></div>
<div class="grid-r-2"><span>grid-r-2</span></div>
<div class="grid-r-3"><span>grid-r-3</span></div>
<div class="grid-r-4"><span>grid-r-4</span></div>
<div class="grid-r-5"><span>grid-r-5</span></div>
<div class="grid-r-6"><span>grid-r-6</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-[1-12] class. The cs stands for column start.
| Class | Styles |
|---|---|
grid-cs-1 | |
grid-cs-2 | |
grid-cs-3 | |
grid-cs-4 | |
grid-cs-5 | |
grid-cs-6 | |
grid-cs-7 | |
grid-cs-8 | |
grid-cs-9 | |
grid-cs-10 | |
grid-cs-11 | |
grid-cs-12 | |
Supported Pseudo-Variants
active
checked
dark
disabled
first-of-type
focus
focus-visible
focus-within
group-focus
group-hover
hover
landscape
last-of-type
light
portrait
reduce-motion
responsive
visited
See more pseudo-variants.
To specify the ending column position for an element, use the grid-ce-[1-12] class. The ce stands for column end.
| Class | Styles |
|---|---|
grid-ce-1 | |
grid-ce-2 | |
grid-ce-3 | |
grid-ce-4 | |
grid-ce-5 | |
grid-ce-6 | |
grid-ce-7 | |
grid-ce-8 | |
grid-ce-9 | |
grid-ce-10 | |
grid-ce-11 | |
grid-ce-12 | |
Supported Pseudo-Variants
active
checked
dark
disabled
first-of-type
focus
focus-visible
focus-within
group-focus
group-hover
hover
landscape
last-of-type
light
portrait
reduce-motion
responsive
visited
See more pseudo-variants.
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 row position for an element, use the grid-rs-[1-4] class. The rs stands for row start.
| Class | Styles |
|---|---|
grid-rs-1 | |
grid-rs-2 | |
grid-rs-3 | |
grid-rs-4 | |
Supported Pseudo-Variants
active
checked
dark
disabled
first-of-type
focus
focus-visible
focus-within
group-focus
group-hover
hover
landscape
last-of-type
light
portrait
reduce-motion
responsive
visited
See more pseudo-variants.
To specify the ending row position for an element, use the grid-re-[1-4] class. The re stands for row end.
| Class | Styles |
|---|---|
grid-re-1 | |
grid-re-2 | |
grid-re-3 | |
grid-re-4 | |
Supported Pseudo-Variants
active
checked
dark
disabled
first-of-type
focus
focus-visible
focus-within
group-focus
group-hover
hover
landscape
last-of-type
light
portrait
reduce-motion
responsive
visited
See more pseudo-variants.
1-4
2-4
3-4
4-4
1-2
1-3
2-3
<div class="grid grid-cols-5 grid-rows-4 u-gap-2">
<div class="grid-rs-1 grid-re-4 _grid-ex">1-4</div>
<div class="grid-rs-2 grid-re-4 _grid-ex">2-4</div>
<div class="grid-rs-3 grid-re-4 _grid-ex">3-4</div>
<div class="grid-rs-4 grid-re-4 _grid-ex">4-4</div>
<div class="grid-rs-1 grid-re-2 _grid-ex">1-2</div>
<div class="grid-rs-1 grid-re-3 _grid-ex">1-3</div>
<div class="grid-rs-2 grid-re-3 _grid-ex">2-3</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.