Column Gap
Controls the spacing between columns in a grid layout.
| Class | Properties |
|---|---|
| cg-0 | column-gap: 0rem; |
| cg-1 | column-gap: 0.25rem; |
| cg-2 | column-gap: 0.5rem; |
| cg-3 | column-gap: 0.75rem; |
| cg-4 | column-gap: 1rem; |
| cg-5 | column-gap: 1.25rem; |
| cg-6 | column-gap: 1.5rem; |
| cg-7 | column-gap: 1.75rem; |
| cg-8 | column-gap: 2rem; |
| cg-9 | column-gap: 2.25rem; |
| cg-10 | column-gap: 2.5rem; |
| cg-11 | column-gap: 2.75rem; |
| cg-12 | column-gap: 3rem; |
| cg-13 | column-gap: 3.25rem; |
| cg-14 | column-gap: 3.5rem; |
| cg-15 | column-gap: 3.75rem; |
| cg-16 | column-gap: 4rem; |
Using breakpoints
Using responsive breakpoints like sm:cg-*, md:cg-*, lg:cg-*, and xxl:cg-* allows targeting specific utilities in different viewports.
<div class="cg-1 md:cg-2 ..."></div>Using variants
Using :hover variants such as h:cg-* allows you to override elements and change their values when hovering over them.
<div class="cg-1 h:cg-2 ..."></div>