row-gap
Sets only the row (vertical) gap in a grid or flex container. While gap applies the same value to both rows and columns, rg allows individual control of row gaps.
Class List
| Class | CSS | Description |
|---|---|---|
rg4px | row-gap: 4px | row spacing 4px |
rg8px | row-gap: 8px | row spacing 8px |
rg12px | row-gap: 12px | row spacing 12px |
rg16px | row-gap: 16px | row spacing 16px |
rg2rem | row-gap: 2rem (20px) | row spacing 20px |
rg2-4rem | row-gap: 2.4rem (24px) | row spacing 24px |
rg3-2rem | row-gap: 3.2rem (32px) | row spacing 32px |
Visual Comparison
Changes only row gap while keeping column gap the same.
row-gap: 4px — rg4px
123456
row-gap: 16px — rg16px
123456
row-gap: 3.2rem (32px) — rg3-2rem
123456
Usage Examples
<!-- Wide row gap, narrow column gap -->
<div class="dg gtcr3-1fr rg2-4rem cg8px">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
<!-- Control row gap in flex-wrap -->
<div class="df fww rg16px cg8px">
<span>Tag 1</span>
<span>Tag 2</span>
<span>Tag 3</span>
</div>Tips & Notes
Asymmetric gaps with rg + cg
Use rg and cg together to set different row and column gaps. Example: rg2-4rem cg8px
Works with flex too
rg also applies as the row gap when wrapping in df fww (flex-wrap) containers.