Row Gap

Set the spacing between rows in a grid layout.

Widely available

This feature is well established and works across many devices and browser versions.

Chrome
Edge
Firefox
Safari

rg-0
row-gap: 0;
rg-1
row-gap: .25rem;
rg-2
row-gap: .5rem;
rg-3
row-gap: .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;
rg-17
row-gap: 4.25rem;
rg-18
row-gap: 4.5rem;
rg-19
row-gap: 4.75rem;
rg-20
row-gap: 5rem;
rg-21
row-gap: 5.25rem;
rg-22
row-gap: 5.5rem;
rg-23
row-gap: 5.75rem;
rg-24
row-gap: 6rem;
rg-25
row-gap: 6.25rem;
rg-26
row-gap: 6.5rem;
rg-27
row-gap: 6.75rem;
rg-28
row-gap: 7rem;
rg-29
row-gap: 7.25rem;
rg-30
row-gap: 7.5rem;
rg-31
row-gap: 7.75rem;
rg-32
row-gap: 8rem;
rg-33
row-gap: 8.25rem;
rg-34
row-gap: 8.5rem;
rg-35
row-gap: 8.75rem;
rg-36
row-gap: 9rem;
rg-37
row-gap: 9.25rem;
rg-38
row-gap: 9.5rem;
rg-39
row-gap: 9.75rem;
rg-40
row-gap: 10rem;
rg-41
row-gap: 10.25rem;
rg-42
row-gap: 10.5rem;
rg-43
row-gap: 10.75rem;
rg-44
row-gap: 11rem;
rg-45
row-gap: 11.25rem;
rg-46
row-gap: 11.5rem;
rg-47
row-gap: 11.75rem;
rg-48
row-gap: 12rem;
rg-49
row-gap: 12.25rem;
rg-50
row-gap: 12.5rem;
rg-51
row-gap: 12.75rem;
rg-52
row-gap: 13rem;
rg-53
row-gap: 13.25rem;
rg-54
row-gap: 13.5rem;
rg-55
row-gap: 13.75rem;
rg-56
row-gap: 14rem;
rg-57
row-gap: 14.25rem;
rg-58
row-gap: 14.5rem;
rg-59
row-gap: 14.75rem;
rg-60
row-gap: 15rem;
rg-61
row-gap: 15.25rem;
rg-62
row-gap: 15.5rem;
rg-63
row-gap: 15.75rem;
rg-64
row-gap: 16rem;
rg-65
row-gap: 16.25rem;
rg-66
row-gap: 16.5rem;
rg-67
row-gap: 16.75rem;
rg-68
row-gap: 17rem;
rg-69
row-gap: 17.25rem;
rg-70
row-gap: 17.5rem;
rg-71
row-gap: 17.75rem;
rg-72
row-gap: 18rem;
rg-73
row-gap: 18.25rem;
rg-74
row-gap: 18.5rem;
rg-75
row-gap: 18.75rem;
rg-76
row-gap: 19rem;
rg-77
row-gap: 19.25rem;
rg-78
row-gap: 19.5rem;
rg-79
row-gap: 19.75rem;
rg-80
row-gap: 20rem;
rg-81
row-gap: 20.25rem;
rg-82
row-gap: 20.5rem;
rg-83
row-gap: 20.75rem;
rg-84
row-gap: 21rem;
rg-85
row-gap: 21.25rem;
rg-86
row-gap: 21.5rem;
rg-87
row-gap: 21.75rem;
rg-88
row-gap: 22rem;
rg-89
row-gap: 22.25rem;
rg-90
row-gap: 22.5rem;
rg-91
row-gap: 22.75rem;
rg-92
row-gap: 23rem;
rg-93
row-gap: 23.25rem;
rg-94
row-gap: 23.5rem;
rg-95
row-gap: 23.75rem;
rg-96
row-gap: 24rem;
rg-97
row-gap: 24.25rem;
rg-98
row-gap: 24.5rem;
rg-99
row-gap: 24.75rem;
rg-100
row-gap: 25rem;
rg-px
row-gap: 1px;

Responsiveness

Use breakpoint prefixes to target different screen sizes. Styles apply from the breakpoint & up.

Target viewport sizes with breakpoint prefixes.

sm:rg-(value)
Small≥640px
md:rg-(value)
Medium≥768px
lg:rg-(value)
Large≥1024px
xxl:rg-(value)
Extra Large≥1536px

Hover State

Apply styles conditionally on hover using the h: prefix.

Add the h: prefix to apply styles only when the user hovers over the element.

Syntax:h:rg-(value)

Negative Values

Use negative variants to apply negative spacing.

Use the -- syntax to apply negative numeric values.

Syntax:rg--(value)