Inline Size

Set an element's logical inline size.

Widely available

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

Chrome
Edge
Firefox
Safari

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

Responsiveness

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

Target viewport sizes with breakpoint prefixes.

@sm:xs-(value)
Small≥640px
@md:xs-(value)
Medium≥768px
@lg:xs-(value)
Large≥1024px
@xxl:xs-(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:xs-(value)

Negative Values

Use negative variants to apply negative dimensions.

Use the -- syntax to apply negative numeric values.

Syntax:xs--(value)