Gap

Set the spacing between flex & grid items.

Widely available

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

Chrome
Edge
Firefox
Safari

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

Responsiveness

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

Target viewport sizes with breakpoint prefixes.

sm:g-(value)
Small≥640px
md:g-(value)
Medium≥768px
lg:g-(value)
Large≥1024px
xxl:g-(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:g-(value)

Negative Values

Use negative variants to apply negative spacing.

Use the -- syntax to apply negative numeric values.

Syntax:g--(value)