Gap

Utility	Properties
g-0	gap: 0rem;
g-1	gap: 0.25rem;
g-2	gap: 0.5rem;
g-3	gap: 0.75rem;
g-4	gap: 1rem;
g-5	gap: 1.25rem;
g-6	gap: 1.5rem;
g-7	gap: 1.75rem;
g-8	gap: 2rem;
g-9	gap: 2.25rem;
g-10	gap: 2.5rem;
g-11	gap: 2.75rem;
g-12	gap: 3rem;
g-13	gap: 3.25rem;
g-14	gap: 3.5rem;
g-15	gap: 3.75rem;
g-16	gap: 4rem;
g-17	gap: 4.25rem;
g-18	gap: 4.5rem;
g-19	gap: 4.75rem;
g-20	gap: 5rem;
g-21	gap: 5.25rem;
g-22	gap: 5.5rem;
g-23	gap: 5.75rem;
g-24	gap: 6rem;
g-25	gap: 6.25rem;
g-26	gap: 6.5rem;
g-27	gap: 6.75rem;
g-28	gap: 7rem;
g-29	gap: 7.25rem;
g-30	gap: 7.5rem;
g-31	gap: 7.75rem;
g-32	gap: 8rem;
g-33	gap: 8.25rem;
g-34	gap: 8.5rem;
g-35	gap: 8.75rem;
g-36	gap: 9rem;
g-37	gap: 9.25rem;
g-38	gap: 9.5rem;
g-39	gap: 9.75rem;
g-40	gap: 10rem;
g-41	gap: 10.25rem;
g-42	gap: 10.5rem;
g-43	gap: 10.75rem;
g-44	gap: 11rem;
g-45	gap: 11.25rem;
g-46	gap: 11.5rem;
g-47	gap: 11.75rem;
g-48	gap: 12rem;
g-49	gap: 12.25rem;
g-50	gap: 12.5rem;
g-51	gap: 12.75rem;
g-52	gap: 13rem;
g-53	gap: 13.25rem;
g-54	gap: 13.5rem;
g-55	gap: 13.75rem;
g-56	gap: 14rem;
g-57	gap: 14.25rem;
g-58	gap: 14.5rem;
g-59	gap: 14.75rem;
g-60	gap: 15rem;
g-61	gap: 15.25rem;
g-62	gap: 15.5rem;
g-63	gap: 15.75rem;
g-64	gap: 16rem;
g-65	gap: 16.25rem;
g-66	gap: 16.5rem;
g-67	gap: 16.75rem;
g-68	gap: 17rem;
g-69	gap: 17.25rem;
g-70	gap: 17.5rem;
g-71	gap: 17.75rem;
g-72	gap: 18rem;
g-73	gap: 18.25rem;
g-74	gap: 18.5rem;
g-75	gap: 18.75rem;
g-76	gap: 19rem;
g-77	gap: 19.25rem;
g-78	gap: 19.5rem;
g-79	gap: 19.75rem;
g-80	gap: 20rem;
g-81	gap: 20.25rem;
g-82	gap: 20.5rem;
g-83	gap: 20.75rem;
g-84	gap: 21rem;
g-85	gap: 21.25rem;
g-86	gap: 21.5rem;
g-87	gap: 21.75rem;
g-88	gap: 22rem;
g-89	gap: 22.25rem;
g-90	gap: 22.5rem;
g-91	gap: 22.75rem;
g-92	gap: 23rem;
g-93	gap: 23.25rem;
g-94	gap: 23.5rem;
g-95	gap: 23.75rem;
g-96	gap: 24rem;
g-97	gap: 24.25rem;
g-98	gap: 24.5rem;
g-99	gap: 24.75rem;
g-100	gap: 25rem;

This example sets the gap to 2.5rem. The element will have uniform spacing of 2.5rem between its rows and columns.

A

B

C

D

E

<div class="g-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 class="ai-c bg-indigo d-f jc-c p-4 rad-1">D</div>
  <div class="ai-c bg-indigo d-f jc-c p-4 rad-1">E</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:g-*,md:g-*, lg:g-*, and xxl:g-* allows targeting specific utilities in different viewports.

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

Hover modifier

Alternatively, you can apply :hover by using h:g-* utility to override elements and change their values when hovering over them.

<div class="g-1 h:g-2 ..."></div>