# grid-column

> Applies `grid-column`, shorthand for `grid-column-start` / `grid-column-end`: one value sets the start line and spans one track, a `"start / end"` string sets both.

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

Applies `grid-column`, shorthand for `grid-column-start` /
`grid-column-end`: one value sets the start line and spans one track, a
`"start / end"` string sets both. A number always reads as a line number.

## Quick reference

Every documented call, beside the CSS it emits.

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

## Examples

### Basic example

Use `gridColumn("span n")` to make an item span `n` columns:

```tsx
<div mix={[grid(), gridTemplate({ columns: repeat(3, 1) }), gap(4)]}>
	<div mix={[...]}>01</div>
	<div mix={[...]}>02</div>
	<div mix={[...]}>03</div>
	<div mix={[gridColumn("span 2"), ...]}>gridColumn("span 2")</div>
	<div mix={[...]}>05</div>
	<div mix={[gridColumn("span 3"), ...]}>gridColumn("span 3")</div>
</div>
```

### Starting and ending lines

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

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

### Starting on a line

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

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

## Using a custom value

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

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

## Applying on a state

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

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

## Responsive design

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

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

## Signature

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