Skip to content

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.

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