# grid-auto-rows

> Applies `grid-auto-rows` to the *implicit* rows a grid creates past its explicit tracks.

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

Applies `grid-auto-rows` to the *implicit* rows a grid creates past its
explicit tracks. A number resolves on the spacing scale, `"full"` to
`100%`; raw strings such as `minmax(...)` reach CSS verbatim.

## Quick reference

Every documented call, beside the CSS it emits.

| Call | CSS |
| --- | --- |
| `u.gridAutoRows(24)` | `css({ gridAutoRows: "calc(var(--ui-spacing, 0.25rem) * 24)" })` |
| `u.gridAutoRows("minmax(6rem, auto)")` | `css({ gridAutoRows: "minmax(6rem, auto)" })` |
| `u.gridAutoRows("min-content")` | `css({ gridAutoRows: "min-content" })` |

## Examples

### Basic example

Use `gridAutoRows(n)` to size the rows a grid creates for its items, like `gridAutoRows(16)` for 4rem rows:

```tsx
<div mix={[grid(), gridTemplate({ columns: repeat(3, 1) }), gridAutoRows(16), gap(4)]}>
	<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>
```

### Growing past a minimum

Pass a track size like `gridAutoRows("minmax(4rem, auto)")` to give rows a minimum height they grow past when their content needs room:

```tsx
<div
	mix={[
		grid(),
		gridTemplate({ columns: repeat(3, 1) }),
		gridAutoRows("minmax(4rem, auto)"),
		gap(4),
	]}
>
	<div mix={[...]}>01</div>
	<div mix={[...]}>02</div>
	<div mix={[...]}>03</div>
	<div mix={[...]}>04</div>
	<div mix={[...]}>05 has more text, so its row grows</div>
	<div mix={[...]}>06</div>
</div>
```

## Using a custom value

Every scale argument also takes a raw CSS value, which passes through untouched.

```ts
u.gridAutoRows("2.75rem")
```

## Applying on a state

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

```ts
u.hover(u.gridAutoRows(24))
```

## Responsive design

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

```ts
u.at("md", u.gridAutoRows(24))
```

## 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
gridAutoRows(4)
```

## Signature

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