# grid-row

> Applies `grid-row`, placing or spanning a grid item along the block axis.

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

Applies `grid-row`, placing or spanning a grid item along the block axis. A
number is a line number: `u.gridRow(2)` starts the item at the second row
line and occupies one track, while `u.gridRow("span 2")` occupies two.

## Quick reference

Every documented call, beside the CSS it emits.

| Call | CSS |
| --- | --- |
| `u.gridRow(2)` | `css({ gridRow: 2 })` |
| `u.gridRow("span 3")` | `css({ gridRow: "span 3" })` |
| `u.gridRow("1 / -1")` | `css({ gridRow: "1 / -1" })` |
| `u.gridRow("header-start / header-end")` | `css({ gridRow: "header-start / header-end" })` |

## Examples

### Basic example

Use `gridRow("span n")` to make an item span `n` rows:

```tsx
<div
	mix={[
		grid(),
		gridTemplate({ columns: repeat(3, 1), rows: repeat(3, "4rem") }),
		gridAutoFlow("column"),
		gap(4),
	]}
>
	<div mix={[gridRow("span 3"), ...]}>gridRow("span 3")</div>
	<div mix={[...]}>02</div>
	<div mix={[gridRow("span 2"), ...]}>gridRow("span 2")</div>
	<div mix={[...]}>04</div>
	<div mix={[...]}>05</div>
	<div mix={[...]}>06</div>
</div>
```

### Starting and ending lines

Pass `"start / end"` line numbers to place an item between two row lines, with negative numbers counting back from the end:

```tsx
<div
	mix={[
		grid(),
		gridTemplate({ columns: repeat(3, 1), rows: repeat(3, "4rem") }),
		gridAutoFlow("column"),
		gap(4),
		...,
	]}
>
	<div mix={[gridRow("1 / -1"), ...]}>gridRow("1 / -1")</div>
	<div mix={[gridRow("2 / 4"), ...]}>gridRow("2 / 4")</div>
	<div mix={[gridRow("1 / 3"), ...]}>gridRow("1 / 3")</div>
</div>
```

### Starting on a line

Pass a number to start an item on that row line, like `gridRow(2)`; it spans one row from there:

```tsx
<div
	mix={[
		grid(),
		gridTemplate({ columns: repeat(3, 1), rows: repeat(3, "3rem") }),
		gap(4),
		...,
	]}
>
	<div mix={[gridColumn(1), gridRow(2), ...]}>gridRow(2)</div>
	<div mix={[gridColumn(2), gridRow(3), ...]}>gridRow(3)</div>
	<div mix={[gridColumn(3), gridRow(1), ...]}>gridRow(1)</div>
</div>
```

## Using a custom value

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

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

## Applying on a state

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

```ts
u.hover(u.gridRow(2))
```

## Responsive design

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

```ts
u.at("md", u.gridRow(2))
```

## Signature

```ts
u.gridRow(value: GridLineValue)
```