Cirrus

#Grid Gap

Added
0.5.5

These are utility classes used to add variable spacing between elements inside the grid layout.

Unlike the utility classes grid-cols-* and grid-r-* and their other variants, the '*' in grid-gap-* cannot be modified. The '*' is strictly from 1 through 12 inclusive.

Below is an example of usages of the classes. Notice that the grid-gap-* is applied on the grid itself.

<div class="grid grid-cols-6 grid-gap-8">
    <div class="grid-c-2 py-4 bg-green-200"></div>
    <div class="grid-c-2 py-4 bg-green-200"></div>
    <div class="grid-c-2 py-4 bg-green-200"></div>
</div>
<div class="grid grid-cols-6 grid-gap-6">
    <div class="grid-c-2 py-4 bg-green-400"></div>
    <div class="grid-c-2 py-4 bg-green-400"></div>
    <div class="grid-c-2 py-4 bg-green-400"></div>
</div>
<div class="grid grid-cols-6 grid-gap-4">
    <div class="grid-c-2 py-4 bg-green-600"></div>
    <div class="grid-c-2 py-4 bg-green-600"></div>
    <div class="grid-c-2 py-4 bg-green-600"></div>
</div>
<div class="grid grid-cols-6 grid-gap-2">
    <div class="grid-c-2 py-4 bg-green-800"></div>
    <div class="grid-c-2 py-4 bg-green-800"></div>
    <div class="grid-c-2 py-4 bg-green-800"></div>
</div>