Gap

Controls gaps between grid and flexbox elements.

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

---

Using breakpoints

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

Using variants

Using :hover variants such as h:g-* allows you to override elements and change their values when hovering over them.

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