[ @sdxc/u/layout ]

grid-auto-flow

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

View as Markdown Open in GitHub Open in ChatGPT Open in Claude

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

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:

<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:

<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:

<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.

u.hover(u.gridAutoFlow())

Responsive design

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

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

Signature

u.gridAutoFlow(value?: GridAutoFlowValue)