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 tc-white" id="area"> <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.
Media modifier
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>
Hover modifier
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>