Row Gap

Controls the gap between rows in a grid layout.

Class	Properties
rg-0	row-gap: 0rem;
rg-1	row-gap: 0.25rem;
rg-2	row-gap: 0.5rem;
rg-3	row-gap: 0.75rem;
rg-4	row-gap: 1rem;
rg-5	row-gap: 1.25rem;
rg-6	row-gap: 1.5rem;
rg-7	row-gap: 1.75rem;
rg-8	row-gap: 2rem;
rg-9	row-gap: 2.25rem;
rg-10	row-gap: 2.5rem;
rg-11	row-gap: 2.75rem;
rg-12	row-gap: 3rem;
rg-13	row-gap: 3.25rem;
rg-14	row-gap: 3.5rem;
rg-15	row-gap: 3.75rem;
rg-16	row-gap: 4rem;

---

Using breakpoints

Using responsive breakpoints like sm:rg-*, md:rg-*, lg:rg-*, and xxl:rg-* allows targeting specific utilities in different viewports.

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

Using variants

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

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