Min Block Size

Control an element's minimum logical block size.

Widely available

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

Chrome
Edge
Firefox
Safari

min-ys-0
min-block-size: 0;
min-ys-1
min-block-size: .25rem;
min-ys-2
min-block-size: .5rem;
min-ys-3
min-block-size: .75rem;
min-ys-4
min-block-size: 1rem;
min-ys-5
min-block-size: 1.25rem;
min-ys-6
min-block-size: 1.5rem;
min-ys-7
min-block-size: 1.75rem;
min-ys-8
min-block-size: 2rem;
min-ys-9
min-block-size: 2.25rem;
min-ys-10
min-block-size: 2.5rem;
min-ys-11
min-block-size: 2.75rem;
min-ys-12
min-block-size: 3rem;
min-ys-13
min-block-size: 3.25rem;
min-ys-14
min-block-size: 3.5rem;
min-ys-15
min-block-size: 3.75rem;
min-ys-16
min-block-size: 4rem;
min-ys-17
min-block-size: 4.25rem;
min-ys-18
min-block-size: 4.5rem;
min-ys-19
min-block-size: 4.75rem;
min-ys-20
min-block-size: 5rem;
min-ys-21
min-block-size: 5.25rem;
min-ys-22
min-block-size: 5.5rem;
min-ys-23
min-block-size: 5.75rem;
min-ys-24
min-block-size: 6rem;
min-ys-25
min-block-size: 6.25rem;
min-ys-26
min-block-size: 6.5rem;
min-ys-27
min-block-size: 6.75rem;
min-ys-28
min-block-size: 7rem;
min-ys-29
min-block-size: 7.25rem;
min-ys-30
min-block-size: 7.5rem;
min-ys-31
min-block-size: 7.75rem;
min-ys-32
min-block-size: 8rem;
min-ys-33
min-block-size: 8.25rem;
min-ys-34
min-block-size: 8.5rem;
min-ys-35
min-block-size: 8.75rem;
min-ys-36
min-block-size: 9rem;
min-ys-37
min-block-size: 9.25rem;
min-ys-38
min-block-size: 9.5rem;
min-ys-39
min-block-size: 9.75rem;
min-ys-40
min-block-size: 10rem;
min-ys-41
min-block-size: 10.25rem;
min-ys-42
min-block-size: 10.5rem;
min-ys-43
min-block-size: 10.75rem;
min-ys-44
min-block-size: 11rem;
min-ys-45
min-block-size: 11.25rem;
min-ys-46
min-block-size: 11.5rem;
min-ys-47
min-block-size: 11.75rem;
min-ys-48
min-block-size: 12rem;
min-ys-49
min-block-size: 12.25rem;
min-ys-50
min-block-size: 12.5rem;
min-ys-51
min-block-size: 12.75rem;
min-ys-52
min-block-size: 13rem;
min-ys-53
min-block-size: 13.25rem;
min-ys-54
min-block-size: 13.5rem;
min-ys-55
min-block-size: 13.75rem;
min-ys-56
min-block-size: 14rem;
min-ys-57
min-block-size: 14.25rem;
min-ys-58
min-block-size: 14.5rem;
min-ys-59
min-block-size: 14.75rem;
min-ys-60
min-block-size: 15rem;
min-ys-61
min-block-size: 15.25rem;
min-ys-62
min-block-size: 15.5rem;
min-ys-63
min-block-size: 15.75rem;
min-ys-64
min-block-size: 16rem;
min-ys-65
min-block-size: 16.25rem;
min-ys-66
min-block-size: 16.5rem;
min-ys-67
min-block-size: 16.75rem;
min-ys-68
min-block-size: 17rem;
min-ys-69
min-block-size: 17.25rem;
min-ys-70
min-block-size: 17.5rem;
min-ys-71
min-block-size: 17.75rem;
min-ys-72
min-block-size: 18rem;
min-ys-73
min-block-size: 18.25rem;
min-ys-74
min-block-size: 18.5rem;
min-ys-75
min-block-size: 18.75rem;
min-ys-76
min-block-size: 19rem;
min-ys-77
min-block-size: 19.25rem;
min-ys-78
min-block-size: 19.5rem;
min-ys-79
min-block-size: 19.75rem;
min-ys-80
min-block-size: 20rem;
min-ys-81
min-block-size: 20.25rem;
min-ys-82
min-block-size: 20.5rem;
min-ys-83
min-block-size: 20.75rem;
min-ys-84
min-block-size: 21rem;
min-ys-85
min-block-size: 21.25rem;
min-ys-86
min-block-size: 21.5rem;
min-ys-87
min-block-size: 21.75rem;
min-ys-88
min-block-size: 22rem;
min-ys-89
min-block-size: 22.25rem;
min-ys-90
min-block-size: 22.5rem;
min-ys-91
min-block-size: 22.75rem;
min-ys-92
min-block-size: 23rem;
min-ys-93
min-block-size: 23.25rem;
min-ys-94
min-block-size: 23.5rem;
min-ys-95
min-block-size: 23.75rem;
min-ys-96
min-block-size: 24rem;
min-ys-97
min-block-size: 24.25rem;
min-ys-98
min-block-size: 24.5rem;
min-ys-99
min-block-size: 24.75rem;
min-ys-100
min-block-size: 25rem;
min-ys-auto
min-block-size: auto;
min-ys-dvh
min-block-size: 100dvh;
min-ys-dvw
min-block-size: 100dvw;
min-ys-vh
min-block-size: 100vh;
min-ys-vw
min-block-size: 100vw;
min-ys-vi
min-block-size: 100vi;
min-ys-vb
min-block-size: 100vb;
min-ys-svh
min-block-size: 100svh;
min-ys-svw
min-block-size: 100svw;
min-ys-lvh
min-block-size: 100lvh;
min-ys-lvw
min-block-size: 100lvw;
min-ys-vmin
min-block-size: 100vmin;
min-ys-vmax
min-block-size: 100vmax;
min-ys-fc
min-block-size: fit-content;
min-ys-full
min-block-size: 100%;
min-ys-half
min-block-size: 50%;
min-ys-max
min-block-size: max-content;
min-ys-min
min-block-size: min-content;
min-ys-px
min-block-size: 1px;
min-ys-s
min-block-size: stretch;
min-ys-sm
min-block-size: 40rem;
min-ys-md
min-block-size: 48rem;
min-ys-lg
min-block-size: 64rem;
min-ys-xl
min-block-size: 80rem;
min-ys-xxl
min-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:min-ys-*
Small≥640px
md:min-ys-*
Medium≥768px
lg:min-ys-*
Large≥1024px
xxl:min-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:min-ys-*

Negative Values

Use negative variants to apply negative dimensions.

Use the -- syntax to apply negative numeric values.

Syntax:min-ys--*