container

Preset container values and their consumers.

Scope

These values come from the current preset. Project theme declarations can override them. Mode-specific entries are labeled separately.

Shared lengths cap reusable regions and define container-query thresholds. The named conditions are listed separately in Containers.

Values

3xs

--container-3xs

Default16rem

2xs

--container-2xs

Default18rem

xs

--container-xs

Default20rem

sm

--container-sm

Default24rem

md

--container-md

Default28rem

lg

--container-lg

Default32rem

xl

--container-xl

Default36rem

2xl

--container-2xl

Default42rem

3xl

--container-3xl

Default48rem

4xl

--container-4xl

Default56rem

5xl

--container-5xl

Default64rem

6xl

--container-6xl

Default72rem

7xl

--container-7xl

Default80rem

8xl

--container-8xl

Default90rem

Consumers

background-size-, block-size-, contain-intrinsic-block-size-, contain-intrinsic-inline-size-, flex-basis-, h-, height-, inline-size-, mask-size-, max-block-size-, max-h-, max-height-, max-inline-size-, max-size-x-, max-size-y-, max-w-, max-width-, min-block-size-, min-h-, min-height-, min-inline-size-, min-size-x-, min-size-y-, min-w-, min-width-, size-x-, size-y-, w-, width-

Customize

See variables and modes and theme directives. For usage and examples, see Containers.