# grid-area

> Applies `grid-area`, placing an element in a named area of its parent's `grid-template-areas`.

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

Applies `grid-area`, placing an element in a named area of its parent's
`grid-template-areas`.

## Quick reference

Every documented call, beside the CSS it emits.

| Call | CSS |
| --- | --- |
| `u.gridArea("header")` | `css({ gridArea: "header" })` |

## Examples

### Basic example

Use `gridArea(name)` to place an element in an area named by its grid's `gridTemplate({ areas })`:

```tsx
<div
	mix={[
		grid(),
		gridTemplate({
			columns: "10rem 1fr",
			rows: "auto 8rem auto",
			areas: '"header header" "sidebar main" "footer footer"',
		}),
		gap(4),
	]}
>
	<header mix={[gridArea("header"), ...]}>header</header>
	<aside mix={[gridArea("sidebar"), ...]}>sidebar</aside>
	<main mix={[gridArea("main"), ...]}>main</main>
	<footer mix={[gridArea("footer"), ...]}>footer</footer>
</div>
```

## Applying on a state

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

```ts
u.hover(u.gridArea("header"))
```

## Responsive design

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

```ts
u.at("md", u.gridArea("header"))
```

## Signature

```ts
u.gridArea(name: string)
```