# grid-auto-flow

> Applies `grid-auto-flow`, the axis auto-placed items fill along; defaults to `"row"`.

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

Applies `grid-auto-flow`, the axis auto-placed items fill along; defaults
to `"row"`. `dense` backfills earlier holes with later items, diverging
visual order from the DOM order focus follows — keep it presentational.

## Quick reference

Every documented call, beside the CSS it emits.

| Call | CSS |
| --- | --- |
| `u.gridAutoFlow()` | `css({ gridAutoFlow: "row" })` |
| `u.gridAutoFlow("column")` | `css({ gridAutoFlow: "column" })` |
| `u.gridAutoFlow("row dense")` | `css({ gridAutoFlow: "row dense" })` |

## Examples

### Basic example

Use `gridAutoFlow("column")` to fill a grid column by column, creating new columns as items need them:

```tsx
<div mix={[grid(), gridTemplate({ rows: repeat(3, 1) }), gridAutoFlow("column"), 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 mix={[...]}>07</div>
</div>
```

### Filling rows

Use `gridAutoFlow()` to fill a grid row by row, the default, creating new rows as items need them:

```tsx
<div mix={[grid(), gridTemplate({ columns: repeat(3, 1) }), gridAutoFlow(), gap(4), is(96)]}>
	<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 mix={[...]}>07</div>
</div>
```

### Filling holes

Add `dense`, as in `gridAutoFlow("row dense")`, to let later items fill holes earlier items left. Item 03 moves up beside 01:

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

## Applying on a state

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

```ts
u.hover(u.gridAutoFlow())
```

## Responsive design

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

```ts
u.at("md", u.gridAutoFlow())
```

## Signature

```ts
u.gridAutoFlow(value?: GridAutoFlowValue)
```