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-101
column-gap: 25.25rem;
cg-102
column-gap: 25.5rem;
cg-103
column-gap: 25.75rem;
cg-104
column-gap: 26rem;
cg-105
column-gap: 26.25rem;
cg-106
column-gap: 26.5rem;
cg-107
column-gap: 26.75rem;
cg-108
column-gap: 27rem;
cg-109
column-gap: 27.25rem;
cg-110
column-gap: 27.5rem;
cg-111
column-gap: 27.75rem;
cg-112
column-gap: 28rem;
cg-113
column-gap: 28.25rem;
cg-114
column-gap: 28.5rem;
cg-115
column-gap: 28.75rem;
cg-116
column-gap: 29rem;
cg-117
column-gap: 29.25rem;
cg-118
column-gap: 29.5rem;
cg-119
column-gap: 29.75rem;
cg-120
column-gap: 30rem;
cg-121
column-gap: 30.25rem;
cg-122
column-gap: 30.5rem;
cg-123
column-gap: 30.75rem;
cg-124
column-gap: 31rem;
cg-125
column-gap: 31.25rem;
cg-126
column-gap: 31.5rem;
cg-127
column-gap: 31.75rem;
cg-128
column-gap: 32rem;
cg-129
column-gap: 32.25rem;
cg-130
column-gap: 32.5rem;
cg-131
column-gap: 32.75rem;
cg-132
column-gap: 33rem;
cg-133
column-gap: 33.25rem;
cg-134
column-gap: 33.5rem;
cg-135
column-gap: 33.75rem;
cg-136
column-gap: 34rem;
cg-137
column-gap: 34.25rem;
cg-138
column-gap: 34.5rem;
cg-139
column-gap: 34.75rem;
cg-140
column-gap: 35rem;
cg-141
column-gap: 35.25rem;
cg-142
column-gap: 35.5rem;
cg-143
column-gap: 35.75rem;
cg-144
column-gap: 36rem;
cg-145
column-gap: 36.25rem;
cg-146
column-gap: 36.5rem;
cg-147
column-gap: 36.75rem;
cg-148
column-gap: 37rem;
cg-149
column-gap: 37.25rem;
cg-150
column-gap: 37.5rem;
cg-151
column-gap: 37.75rem;
cg-152
column-gap: 38rem;
cg-153
column-gap: 38.25rem;
cg-154
column-gap: 38.5rem;
cg-155
column-gap: 38.75rem;
cg-156
column-gap: 39rem;
cg-157
column-gap: 39.25rem;
cg-158
column-gap: 39.5rem;
cg-159
column-gap: 39.75rem;
cg-160
column-gap: 40rem;
cg-161
column-gap: 40.25rem;
cg-162
column-gap: 40.5rem;
cg-163
column-gap: 40.75rem;
cg-164
column-gap: 41rem;
cg-165
column-gap: 41.25rem;
cg-166
column-gap: 41.5rem;
cg-167
column-gap: 41.75rem;
cg-168
column-gap: 42rem;
cg-169
column-gap: 42.25rem;
cg-170
column-gap: 42.5rem;
cg-171
column-gap: 42.75rem;
cg-172
column-gap: 43rem;
cg-173
column-gap: 43.25rem;
cg-174
column-gap: 43.5rem;
cg-175
column-gap: 43.75rem;
cg-176
column-gap: 44rem;
cg-177
column-gap: 44.25rem;
cg-178
column-gap: 44.5rem;
cg-179
column-gap: 44.75rem;
cg-180
column-gap: 45rem;
cg-181
column-gap: 45.25rem;
cg-182
column-gap: 45.5rem;
cg-183
column-gap: 45.75rem;
cg-184
column-gap: 46rem;
cg-185
column-gap: 46.25rem;
cg-186
column-gap: 46.5rem;
cg-187
column-gap: 46.75rem;
cg-188
column-gap: 47rem;
cg-189
column-gap: 47.25rem;
cg-190
column-gap: 47.5rem;
cg-191
column-gap: 47.75rem;
cg-192
column-gap: 48rem;
cg-193
column-gap: 48.25rem;
cg-194
column-gap: 48.5rem;
cg-195
column-gap: 48.75rem;
cg-196
column-gap: 49rem;
cg-197
column-gap: 49.25rem;
cg-198
column-gap: 49.5rem;
cg-199
column-gap: 49.75rem;
cg-200
column-gap: 50rem;
cg-201
column-gap: 50.25rem;
cg-202
column-gap: 50.5rem;
cg-203
column-gap: 50.75rem;
cg-204
column-gap: 51rem;
cg-205
column-gap: 51.25rem;
cg-206
column-gap: 51.5rem;
cg-207
column-gap: 51.75rem;
cg-208
column-gap: 52rem;
cg-209
column-gap: 52.25rem;
cg-210
column-gap: 52.5rem;
cg-211
column-gap: 52.75rem;
cg-212
column-gap: 53rem;
cg-213
column-gap: 53.25rem;
cg-214
column-gap: 53.5rem;
cg-215
column-gap: 53.75rem;
cg-216
column-gap: 54rem;
cg-217
column-gap: 54.25rem;
cg-218
column-gap: 54.5rem;
cg-219
column-gap: 54.75rem;
cg-220
column-gap: 55rem;
cg-221
column-gap: 55.25rem;
cg-222
column-gap: 55.5rem;
cg-223
column-gap: 55.75rem;
cg-224
column-gap: 56rem;
cg-225
column-gap: 56.25rem;
cg-226
column-gap: 56.5rem;
cg-227
column-gap: 56.75rem;
cg-228
column-gap: 57rem;
cg-229
column-gap: 57.25rem;
cg-230
column-gap: 57.5rem;
cg-231
column-gap: 57.75rem;
cg-232
column-gap: 58rem;
cg-233
column-gap: 58.25rem;
cg-234
column-gap: 58.5rem;
cg-235
column-gap: 58.75rem;
cg-236
column-gap: 59rem;
cg-237
column-gap: 59.25rem;
cg-238
column-gap: 59.5rem;
cg-239
column-gap: 59.75rem;
cg-240
column-gap: 60rem;
cg-241
column-gap: 60.25rem;
cg-242
column-gap: 60.5rem;
cg-243
column-gap: 60.75rem;
cg-244
column-gap: 61rem;
cg-245
column-gap: 61.25rem;
cg-246
column-gap: 61.5rem;
cg-247
column-gap: 61.75rem;
cg-248
column-gap: 62rem;
cg-249
column-gap: 62.25rem;
cg-250
column-gap: 62.5rem;
cg-251
column-gap: 62.75rem;
cg-252
column-gap: 63rem;
cg-253
column-gap: 63.25rem;
cg-254
column-gap: 63.5rem;
cg-255
column-gap: 63.75rem;
cg-256
column-gap: 64rem;
cg-257
column-gap: 64.25rem;
cg-258
column-gap: 64.5rem;
cg-259
column-gap: 64.75rem;
cg-260
column-gap: 65rem;
cg-261
column-gap: 65.25rem;
cg-262
column-gap: 65.5rem;
cg-263
column-gap: 65.75rem;
cg-264
column-gap: 66rem;
cg-265
column-gap: 66.25rem;
cg-266
column-gap: 66.5rem;
cg-267
column-gap: 66.75rem;
cg-268
column-gap: 67rem;
cg-269
column-gap: 67.25rem;
cg-270
column-gap: 67.5rem;
cg-271
column-gap: 67.75rem;
cg-272
column-gap: 68rem;
cg-273
column-gap: 68.25rem;
cg-274
column-gap: 68.5rem;
cg-275
column-gap: 68.75rem;
cg-276
column-gap: 69rem;
cg-277
column-gap: 69.25rem;
cg-278
column-gap: 69.5rem;
cg-279
column-gap: 69.75rem;
cg-280
column-gap: 70rem;
cg-281
column-gap: 70.25rem;
cg-282
column-gap: 70.5rem;
cg-283
column-gap: 70.75rem;
cg-284
column-gap: 71rem;
cg-285
column-gap: 71.25rem;
cg-286
column-gap: 71.5rem;
cg-287
column-gap: 71.75rem;
cg-288
column-gap: 72rem;
cg-289
column-gap: 72.25rem;
cg-290
column-gap: 72.5rem;
cg-291
column-gap: 72.75rem;
cg-292
column-gap: 73rem;
cg-293
column-gap: 73.25rem;
cg-294
column-gap: 73.5rem;
cg-295
column-gap: 73.75rem;
cg-296
column-gap: 74rem;
cg-297
column-gap: 74.25rem;
cg-298
column-gap: 74.5rem;
cg-299
column-gap: 74.75rem;
cg-300
column-gap: 75rem;
cg-301
column-gap: 75.25rem;
cg-302
column-gap: 75.5rem;
cg-303
column-gap: 75.75rem;
cg-304
column-gap: 76rem;
cg-305
column-gap: 76.25rem;
cg-306
column-gap: 76.5rem;
cg-307
column-gap: 76.75rem;
cg-308
column-gap: 77rem;
cg-309
column-gap: 77.25rem;
cg-310
column-gap: 77.5rem;
cg-311
column-gap: 77.75rem;
cg-312
column-gap: 78rem;
cg-313
column-gap: 78.25rem;
cg-314
column-gap: 78.5rem;
cg-315
column-gap: 78.75rem;
cg-316
column-gap: 79rem;
cg-317
column-gap: 79.25rem;
cg-318
column-gap: 79.5rem;
cg-319
column-gap: 79.75rem;
cg-320
column-gap: 80rem;
cg-321
column-gap: 80.25rem;
cg-322
column-gap: 80.5rem;
cg-323
column-gap: 80.75rem;
cg-324
column-gap: 81rem;
cg-325
column-gap: 81.25rem;
cg-326
column-gap: 81.5rem;
cg-327
column-gap: 81.75rem;
cg-328
column-gap: 82rem;
cg-329
column-gap: 82.25rem;
cg-330
column-gap: 82.5rem;
cg-331
column-gap: 82.75rem;
cg-332
column-gap: 83rem;
cg-333
column-gap: 83.25rem;
cg-334
column-gap: 83.5rem;
cg-335
column-gap: 83.75rem;
cg-336
column-gap: 84rem;
cg-337
column-gap: 84.25rem;
cg-338
column-gap: 84.5rem;
cg-339
column-gap: 84.75rem;
cg-340
column-gap: 85rem;
cg-341
column-gap: 85.25rem;
cg-342
column-gap: 85.5rem;
cg-343
column-gap: 85.75rem;
cg-344
column-gap: 86rem;
cg-345
column-gap: 86.25rem;
cg-346
column-gap: 86.5rem;
cg-347
column-gap: 86.75rem;
cg-348
column-gap: 87rem;
cg-349
column-gap: 87.25rem;
cg-350
column-gap: 87.5rem;
cg-351
column-gap: 87.75rem;
cg-352
column-gap: 88rem;
cg-353
column-gap: 88.25rem;
cg-354
column-gap: 88.5rem;
cg-355
column-gap: 88.75rem;
cg-356
column-gap: 89rem;
cg-357
column-gap: 89.25rem;
cg-358
column-gap: 89.5rem;
cg-359
column-gap: 89.75rem;
cg-360
column-gap: 90rem;
cg-361
column-gap: 90.25rem;
cg-362
column-gap: 90.5rem;
cg-363
column-gap: 90.75rem;
cg-364
column-gap: 91rem;
cg-365
column-gap: 91.25rem;
cg-366
column-gap: 91.5rem;
cg-367
column-gap: 91.75rem;
cg-368
column-gap: 92rem;
cg-369
column-gap: 92.25rem;
cg-370
column-gap: 92.5rem;
cg-371
column-gap: 92.75rem;
cg-372
column-gap: 93rem;
cg-373
column-gap: 93.25rem;
cg-374
column-gap: 93.5rem;
cg-375
column-gap: 93.75rem;
cg-376
column-gap: 94rem;
cg-377
column-gap: 94.25rem;
cg-378
column-gap: 94.5rem;
cg-379
column-gap: 94.75rem;
cg-380
column-gap: 95rem;
cg-381
column-gap: 95.25rem;
cg-382
column-gap: 95.5rem;
cg-383
column-gap: 95.75rem;
cg-384
column-gap: 96rem;
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-(value)
Small≥640px
@md:cg-(value)
Medium≥768px
@lg:cg-(value)
Large≥1024px
@xxl:cg-(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:cg-(value)

Negative Values

Use negative variants to apply negative spacing.

Use the -- syntax to apply negative numeric values.

Syntax:cg--(value)