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.

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" })`

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)