Column Gap

Class	Style
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;

The element will have a uniform spacing of 2.5rem between its columns.

A

B

C

<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.

Breakpoint variant

You can combine responsive breakpoints like sm:cg-*,md:cg-*, lg:cg-*, and xxl:cg-* to allow targeting specific utilities in different viewports.

<div class="cg-1 md:cg-2 ..."></div>

Hover variant

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>