Column Gap
Controls the spacing between columns in a grid layout.
Class | Properties |
---|---|
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.
Using variants
Using :hover
variants such as h:cg-*
allows you to override elements and change their values when hovering over them.