Skip to main content

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