Sizing

Style properties for controlling the size of an element.

Alongside sizes tokens, every sizing property accepts auto, screen and fractional values:

• Halves: 1/2
• Thirds: 1/3 to 2/3
• Fourths: 1/4 to 3/4
• Fifths: 1/5 to 4/5
• Sixths: 1/6 to 5/6
• Twelfths: 1/12 to 11/12 — width only

Width

<div className={css({ width: '5' })} />
<div className={css({ w: '1/2' })} /> // shorthand, fractional

Height

Height properties also accept the relative units dvh, svh and lvh.

<div className={css({ height: '5' })} />
<div className={css({ h: 'dvh' })} /> // shorthand, relative unit

Size

Use the boxSize property to set the width and height of an element.

<div className={css({ boxSize: '24' })} />