Gap
Controls gaps between grid and flexbox elements.
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.
<div class="g-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 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.
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>
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>