[ @sdxc/u/layout ]

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.

View as Markdown Open in GitHub Open in ChatGPT Open in Claude

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

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:

A narrow container stacks the photo over the text.

A container wider than 24rem sets the photo beside the text.

<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.

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

Responsive design

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

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

Signature

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