Inline Size

Control an element's logical inline size.

Widely available

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

Chrome
Edge
Firefox
Safari

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

Responsiveness

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

Target viewport sizes with breakpoint prefixes.

sm:xs-*
Small≥640px
md:xs-*
Medium≥768px
lg:xs-*
Large≥1024px
xxl:xs-*
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:xs-*

Negative Values

Use negative variants to apply negative dimensions.

Use the -- syntax to apply negative numeric values.

Syntax:xs--*