# place

> Sets item and/or content placement on both axes from whichever option keys are given, so a partial options object emits only the declarations belonging to the keys it carries.

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

Sets item and/or content placement on both axes from whichever option
keys are given, so a partial options object emits only the declarations
belonging to the keys it carries.

## Quick reference

Every documented call, beside the CSS it emits.

| Call | CSS |
| --- | --- |
| `u.place({ items: "center", content: "between" })` | `css({ alignItems: "center", justifyItems: "center", alignContent: "space-between", justifyContent: "space-between" })` |

## Examples

### Basic example

Use `place({ items: "center" })` to center grid items inside their cells on both axes at once:

```tsx
<div
	mix={[
		grid(),
		gridTemplate({ columns: repeat(3, 1) }),
		gridAutoRows(24),
		gap(4),
		place({ items: "center" }),
		...,
	]}
>
	<div mix={[...]}>01</div>
	<div mix={[...]}>02</div>
	<div mix={[...]}>03</div>
</div>
```

### Placing content

Use the `content` option to distribute the grid's tracks inside a larger container on both axes, like `place({ content: "between" })`:

```tsx
<div
	mix={[
		grid(),
		gridTemplate({ columns: repeat(3, "5rem"), rows: repeat(2, "3rem") }),
		place({ content: "between" }),
		bs(48),
		...,
	]}
>
	<div mix={[...]}>01</div>
	<div mix={[...]}>02</div>
	<div mix={[...]}>03</div>
	<div mix={[...]}>04</div>
	<div mix={[...]}>05</div>
	<div mix={[...]}>06</div>
</div>
```

## Applying on a state

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

```ts
u.hover(u.place({ items: "center", content: "between" }))
```

## Responsive design

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

```ts
u.at("md", u.place({ items: "center", content: "between" }))
```

## Signature

```ts
u.place(options?: PlaceOptions)
```