Column Gap
Controls the spacing between columns in a grid layout.
| Utility | 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; |
| cg-17 | column-gap: 4.25rem; |
| cg-18 | column-gap: 4.5rem; |
| cg-19 | column-gap: 4.75rem; |
| cg-20 | column-gap: 5rem; |
| cg-21 | column-gap: 5.25rem; |
| cg-22 | column-gap: 5.5rem; |
| cg-23 | column-gap: 5.75rem; |
| cg-24 | column-gap: 6rem; |
| cg-25 | column-gap: 6.25rem; |
| cg-26 | column-gap: 6.5rem; |
| cg-27 | column-gap: 6.75rem; |
| cg-28 | column-gap: 7rem; |
| cg-29 | column-gap: 7.25rem; |
| cg-30 | column-gap: 7.5rem; |
| cg-31 | column-gap: 7.75rem; |
| cg-32 | column-gap: 8rem; |
| cg-33 | column-gap: 8.25rem; |
| cg-34 | column-gap: 8.5rem; |
| cg-35 | column-gap: 8.75rem; |
| cg-36 | column-gap: 9rem; |
| cg-37 | column-gap: 9.25rem; |
| cg-38 | column-gap: 9.5rem; |
| cg-39 | column-gap: 9.75rem; |
| cg-40 | column-gap: 10rem; |
| cg-41 | column-gap: 10.25rem; |
| cg-42 | column-gap: 10.5rem; |
| cg-43 | column-gap: 10.75rem; |
| cg-44 | column-gap: 11rem; |
| cg-45 | column-gap: 11.25rem; |
| cg-46 | column-gap: 11.5rem; |
| cg-47 | column-gap: 11.75rem; |
| cg-48 | column-gap: 12rem; |
| cg-49 | column-gap: 12.25rem; |
| cg-50 | column-gap: 12.5rem; |
| cg-51 | column-gap: 12.75rem; |
| cg-52 | column-gap: 13rem; |
| cg-53 | column-gap: 13.25rem; |
| cg-54 | column-gap: 13.5rem; |
| cg-55 | column-gap: 13.75rem; |
| cg-56 | column-gap: 14rem; |
| cg-57 | column-gap: 14.25rem; |
| cg-58 | column-gap: 14.5rem; |
| cg-59 | column-gap: 14.75rem; |
| cg-60 | column-gap: 15rem; |
| cg-61 | column-gap: 15.25rem; |
| cg-62 | column-gap: 15.5rem; |
| cg-63 | column-gap: 15.75rem; |
| cg-64 | column-gap: 16rem; |
| cg-65 | column-gap: 16.25rem; |
| cg-66 | column-gap: 16.5rem; |
| cg-67 | column-gap: 16.75rem; |
| cg-68 | column-gap: 17rem; |
| cg-69 | column-gap: 17.25rem; |
| cg-70 | column-gap: 17.5rem; |
| cg-71 | column-gap: 17.75rem; |
| cg-72 | column-gap: 18rem; |
| cg-73 | column-gap: 18.25rem; |
| cg-74 | column-gap: 18.5rem; |
| cg-75 | column-gap: 18.75rem; |
| cg-76 | column-gap: 19rem; |
| cg-77 | column-gap: 19.25rem; |
| cg-78 | column-gap: 19.5rem; |
| cg-79 | column-gap: 19.75rem; |
| cg-80 | column-gap: 20rem; |
| cg-81 | column-gap: 20.25rem; |
| cg-82 | column-gap: 20.5rem; |
| cg-83 | column-gap: 20.75rem; |
| cg-84 | column-gap: 21rem; |
| cg-85 | column-gap: 21.25rem; |
| cg-86 | column-gap: 21.5rem; |
| cg-87 | column-gap: 21.75rem; |
| cg-88 | column-gap: 22rem; |
| cg-89 | column-gap: 22.25rem; |
| cg-90 | column-gap: 22.5rem; |
| cg-91 | column-gap: 22.75rem; |
| cg-92 | column-gap: 23rem; |
| cg-93 | column-gap: 23.25rem; |
| cg-94 | column-gap: 23.5rem; |
| cg-95 | column-gap: 23.75rem; |
| cg-96 | column-gap: 24rem; |
| cg-97 | column-gap: 24.25rem; |
| cg-98 | column-gap: 24.5rem; |
| cg-99 | column-gap: 24.75rem; |
| cg-100 | column-gap: 25rem; |
This example sets the column gap to 2.5rem. The element will have a uniform spacing of 2.5rem between its columns.
<div class="cg-10 d-g gtc-3 stripes tc-white"> <div class="ai-c bg-indigo d-f jc-c p-4 rad-1">A</div> <div class="ai-c bg-indigo d-f jc-c p-4 rad-1">B</div> <div class="ai-c bg-indigo d-f jc-c p-4 rad-1">C</div></div>Conditional styles
Learn how to override existing utilities based on the user's screen size or other factors, such as hover states.
You can combine 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>
Alternatively, you can apply :hover by using h:cg-* utility to override elements and change their values when hovering over them.
<div class="cg-1 h:cg-2 ..."></div>