size-3xs
|
width: var(--container-3xs);/* 16rem */
height: var(--container-3xs);/* 16rem */
|
size-2xs
|
width: var(--container-2xs);/* 18rem */
height: var(--container-2xs);/* 18rem */
|
size-xs
|
width: var(--container-xs);/* 20rem */
height: var(--container-xs);/* 20rem */
|
size-sm
|
width: var(--container-sm);/* 24rem */
height: var(--container-sm);/* 24rem */
|
size-md
|
width: var(--container-md);/* 28rem */
height: var(--container-md);/* 28rem */
|
size-lg
|
width: var(--container-lg);/* 32rem */
height: var(--container-lg);/* 32rem */
|
size-xl
|
width: var(--container-xl);/* 36rem */
height: var(--container-xl);/* 36rem */
|
size-2xl
|
width: var(--container-2xl);/* 42rem */
height: var(--container-2xl);/* 42rem */
|
size-3xl
|
width: var(--container-3xl);/* 48rem */
height: var(--container-3xl);/* 48rem */
|
size-4xl
|
width: var(--container-4xl);/* 56rem */
height: var(--container-4xl);/* 56rem */
|
size-5xl
|
width: var(--container-5xl);/* 64rem */
height: var(--container-5xl);/* 64rem */
|
size-6xl
|
width: var(--container-6xl);/* 72rem */
height: var(--container-6xl);/* 72rem */
|
size-7xl
|
width: var(--container-7xl);/* 80rem */
height: var(--container-7xl);/* 80rem */
|
size-auto
|
width: auto;
height: auto;
|
size-px
|
width: 1px;
height: 1px;
|
size-full
|
width: 100%;
height: 100%;
|
size-screen
|
width: 100vw;
height: 100vw;
|
size-dvw
|
width: 100dvw;
height: 100dvw;
|
size-dvh
|
width: 100dvh;
height: 100dvh;
|
size-lvw
|
width: 100lvw;
height: 100lvw;
|
size-lvh
|
width: 100lvh;
height: 100lvh;
|
size-svw
|
width: 100svw;
height: 100svw;
|
size-svh
|
width: 100svh;
height: 100svh;
|
size-min
|
width: min-content;
height: min-content;
|
size-max
|
width: max-content;
height: max-content;
|
size-fit
|
width: fit-content;
height: fit-content;
|
size-<number>
|
width: calc(var(--spacing) * <number>);/* 0.25rem */
height: calc(var(--spacing) * <number>);/* 0.25rem */
|
size-4
|
width: calc(var(--spacing) * 4);
height: calc(var(--spacing) * 4);
|
size-<fraction>
|
width: <percentage>;
height: <percentage>;
|
size-1/2
|
width: 50%;
height: 50%;
|
size-[<value>]
|
width: <value>;
height: <value>;
|
size-[1rem]
|
width: 1rem;
height: 1rem;
|
size-(<custom-property>)
|
width: var(<custom-property>);
height: var(<custom-property>);
|
size-(--my-length)
|
width: var(--my-length);
height: var(--my-length);
|
size-(length:<custom-property>)
|
width: var(<custom-property>);
height: var(<custom-property>);
|
size-(length:--my-length)
|
width: var(--my-length);
height: var(--my-length);
|
