Max Block Size

Control 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-auto
max-block-size: auto;
max-ys-dvh
max-block-size: 100dvh;
max-ys-dvw
max-block-size: 100dvw;
max-ys-vh
max-block-size: 100vh;
max-ys-vw
max-block-size: 100vw;
max-ys-vi
max-block-size: 100vi;
max-ys-vb
max-block-size: 100vb;
max-ys-svh
max-block-size: 100svh;
max-ys-svw
max-block-size: 100svw;
max-ys-lvh
max-block-size: 100lvh;
max-ys-lvw
max-block-size: 100lvw;
max-ys-vmin
max-block-size: 100vmin;
max-ys-vmax
max-block-size: 100vmax;
max-ys-fc
max-block-size: fit-content;
max-ys-full
max-block-size: 100%;
max-ys-half
max-block-size: 50%;
max-ys-max
max-block-size: max-content;
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-md
max-block-size: 48rem;
max-ys-lg
max-block-size: 64rem;
max-ys-xl
max-block-size: 80rem;
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-*
Small≥640px
md:max-ys-*
Medium≥768px
lg:max-ys-*
Large≥1024px
xxl:max-ys-*
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-*

Negative Values

Use negative variants to apply negative dimensions.

Use the -- syntax to apply negative numeric values.

Syntax:max-ys--*