Skip to main content

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;

Media Queries

Prefix a class with a breakpoint to apply it from that width up.

Pseudo Classes

Prefix a class with a state to apply it only while that state matches.