Column Gap

Set the spacing between columns in a grid layout.

Widely available

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

Chrome
Edge
Firefox
Safari

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

Responsiveness

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

Target viewport sizes with breakpoint prefixes.

sm:cg-*
Small≥640px
md:cg-*
Medium≥768px
lg:cg-*
Large≥1024px
xxl:cg-*
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:cg-*

Negative Values

Use negative variants to apply negative spacing.

Use the -- syntax to apply negative numeric values.

Syntax:cg--*