Block Size

Set an element's logical block size.

Widely available

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

Chrome
Edge
Firefox
Safari

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

Responsiveness

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

Target viewport sizes with breakpoint prefixes.

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

Negative Values

Use negative variants to apply negative dimensions.

Use the -- syntax to apply negative numeric values.

Syntax:ys--(value)