# width

> Applies the physical `width` property, for an element whose sizing is tied to the physical viewport axis; `u.is()` (`inline-size`) covers sizing along the logical inline axis.

```ts
import { width } from "@sdxc/u/size";
```

Applies the physical `width` property, for an element whose sizing is tied
to the physical viewport axis; `u.is()` (`inline-size`) covers sizing along
the logical inline axis.

## Quick reference

Every documented call, beside the CSS it emits.

| Call | CSS |
| --- | --- |
| `u.width("full")` | `css({ width: "100%" })` |

## Examples

### Basic example

Use `width(n)` with a step of the spacing scale, like `width(32)` or `width(64)`, to set an element's physical width:

```tsx
<div mix={[...]}>
	<div mix={[width(96), ...]}>width(96)</div>
	<div mix={[width(80), ...]}>width(80)</div>
	<div mix={[width(64), ...]}>width(64)</div>
	<div mix={[width(48), ...]}>width(48)</div>
	<div mix={[width(40), ...]}>width(40)</div>
	<div mix={[width(32), ...]}>width(32)</div>
</div>
```

### Percentages

Use `width("full")` to fill the container's width, or pass any CSS length as a string, like `width("50%")`:

```tsx
<div mix={[...]}>
	<div mix={[width("full"), ...]}>width("full")</div>
	<div mix={[width("75%"), ...]}>width("75%")</div>
	<div mix={[width("50%"), ...]}>width("50%")</div>
	<div mix={[width("25%"), ...]}>width("25%")</div>
</div>
```

## Applying on a state

Wrap the call in a state utility to scope it to one selector.

```ts
u.hover(u.width("full"))
```

## Responsive design

Wrap the call in a container query to scope it to one width.

```ts
u.at("md", u.width("full"))
```

## Customizing your theme

### Customizing spacing

Every numeric step multiplies `--ui-spacing`, so redefining it rescales every spacing and sizing utility at once:

```css
:root {
	--ui-spacing: 0.25rem;
}
```

Every call that names the step now reads the new value:

```ts
width(4)
```

## Signature

```ts
u.width(value: SizeValue)
```