Block Size

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

Negative Values

Use negative variants to apply negative dimensions.

Use the -- syntax to apply negative numeric values.

Syntax:ys--*