Cirrus

#Grid Span

Added
0.5.5

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 grid-gap-3">
    <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 grid-gap-3">
    <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 grid-gap-3" 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 grid-gap-3">
    <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-endExtends grid element to take up remaining width.
grid-ce-autoAuto 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 grid-gap-3">
    <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-endExtends grid element to take up remaining height.
grid-re-autoAuto adjusts element height span.