[ @sdxc/u/layout ]

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.

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

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

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:

gridColumn("span 2")

gridColumn("span 3")

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

gridColumn("2 / 5")

gridColumn("1 / 3")

gridColumn("4 / -1")

gridColumn("1 / -1")

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

gridColumn(2)

gridColumn(3)

gridColumn(1)

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

u.gridColumn("2.75rem")

Applying on a state

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

u.hover(u.gridColumn(2))

Responsive design

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

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

Signature

u.gridColumn(value: GridLineValue)