[ @sdxc/u/layout ]

grid-auto-columns

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

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

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

Quick reference

Every documented call, beside the CSS it emits.

Call	CSS
`u.gridAutoColumns(40)`	`css({ gridAutoColumns: "calc(var(--ui-spacing, 0.25rem) * 40)" })`
`u.gridAutoColumns("minmax(10rem, 1fr)")`	`css({ gridAutoColumns: "minmax(10rem, 1fr)" })`
`u.gridAutoColumns("max-content")`	`css({ gridAutoColumns: "max-content" })`

Examples

Basic example

Use gridAutoColumns(n) to size the columns a grid creates on its own, here one per item with gridAutoFlow("column"):

<div mix={[grid(), gridAutoFlow("column"), gridAutoColumns(24), gap(4)]}>
	<div mix={[...]}>01</div>
	<div mix={[...]}>02</div>
	<div mix={[...]}>03</div>
</div>

Sharing the width

Pass a track size like gridAutoColumns("minmax(0, 1fr)") to make every implicit column an equal share of the grid's width:

<div mix={[grid(), gridAutoFlow("column"), gridAutoColumns("minmax(0, 1fr)"), gap(4)]}>
	<div mix={[...]}>01</div>
	<div mix={[...]}>02</div>
	<div mix={[...]}>03</div>
	<div mix={[...]}>04</div>
</div>

Sizing to content

Use gridAutoColumns("max-content") to make each implicit column as wide as its content:

<nav mix={[grid(), gridAutoFlow("column"), gridAutoColumns("max-content"), gap(4)]}>
	<a href="/" mix={[...]}>
		Home
	</a>
	<a href="/docs" mix={[...]}>
		Documentation
	</a>
	<a href="/api" mix={[...]}>
		API
	</a>
</nav>

Using a custom value

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

u.gridAutoColumns("2.75rem")

Applying on a state

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

u.hover(u.gridAutoColumns(40))

Responsive design

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

u.at("md", u.gridAutoColumns(40))

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:

gridAutoColumns(4)

Signature

u.gridAutoColumns(value: SizeValue)