[ @sdxc/u/layout ]

grid-auto-rows

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

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

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

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:

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

05 has more text, so its row grows

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

u.gridAutoRows("2.75rem")

Applying on a state

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

u.hover(u.gridAutoRows(24))

Responsive design

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

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:

:root {
	--ui-spacing: 0.25rem;
}

Every call that names the step now reads the new value:

gridAutoRows(4)

Signature

u.gridAutoRows(value: SizeValue)