Row Gap
Controls the gap between rows in a grid layout.
Class | Properties |
---|---|
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.
Using variants
Using :hover
variants such as h:rg-*
allows you to override elements and change their values when hovering over them.