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;

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)