Max Block Size

Set an element's maximum logical block size.

Widely available

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

Chrome
Edge
Firefox
Safari

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

Negative Values

Use negative variants to apply negative dimensions.

Use the -- syntax to apply negative numeric values.

Syntax:max-ys--(value)