# container

> Declares the host as a named container query context via the `container` shorthand (`container-name` and `container-type` together), so a descendant's `u.at(size, name, ...)` query can target it by name.

```ts
import { container } from "@sdxc/u/layout";
```

Declares the host as a named container query context via the `container`
shorthand (`container-name` and `container-type` together), so a
descendant's `u.at(size, name, ...)` query can target it by name.

## Quick reference

Every documented call, beside the CSS it emits.

| Call | CSS |
| --- | --- |
| `u.container("sidebar")` | `css({ container: "sidebar / inline-size" })` |
| `u.container("sidebar", "size")` | `css({ container: "sidebar / size" })` |

## Examples

### Basic example

Use `container(name)` to make an element a container that its descendants query with `at(size, name, ...)`, so a component adapts to the room it is given rather than to the viewport:

```tsx
<div mix={[...]}>
	<div mix={[container("card"), is(60)]}>
		<article
			mix={[
				grid(),
				at("sm", "card", gridTemplate({ columns: "8rem 1fr" })),
				gap(3),
				...,
			]}
		>
			<div mix={[bs(24), ...]} />
			<p mix={[m(0), text("sm")]}>A narrow container stacks the photo over the text.</p>
		</article>
	</div>
	<div mix={[container("card"), is(120)]}>
		<article
			mix={[
				grid(),
				at("sm", "card", gridTemplate({ columns: "8rem 1fr" })),
				gap(3),
				...,
			]}
		>
			<div mix={[bs(24), ...]} />
			<p mix={[m(0), text("sm")]}>
				A container wider than 24rem sets the photo beside the text.
			</p>
		</article>
	</div>
</div>
```

## Applying on a state

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

```ts
u.hover(u.container("sidebar"))
```

## Responsive design

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

```ts
u.at("md", u.container("sidebar"))
```

## Signature

```ts
u.container(name: string, type?: ContainerTypeValue)
```