[ @sdxc/u/layout ]

grid-row

Applies grid-row, placing or spanning a grid item along the block axis.

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

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

Quick reference

Every documented call, beside the CSS it emits.

Call	CSS
`u.gridRow(2)`	`css({ gridRow: 2 })`
`u.gridRow("span 3")`	`css({ gridRow: "span 3" })`
`u.gridRow("1 / -1")`	`css({ gridRow: "1 / -1" })`
`u.gridRow("header-start / header-end")`	`css({ gridRow: "header-start / header-end" })`

Examples

Basic example

Use gridRow("span n") to make an item span n rows:

gridRow("span 3")

gridRow("span 2")

<div
	mix={[
		grid(),
		gridTemplate({ columns: repeat(3, 1), rows: repeat(3, "4rem") }),
		gridAutoFlow("column"),
		gap(4),
	]}
>
	<div mix={[gridRow("span 3"), ...]}>gridRow("span 3")</div>
	<div mix={[...]}>02</div>
	<div mix={[gridRow("span 2"), ...]}>gridRow("span 2")</div>
	<div mix={[...]}>04</div>
	<div mix={[...]}>05</div>
	<div mix={[...]}>06</div>
</div>

Starting and ending lines

Pass "start / end" line numbers to place an item between two row lines, with negative numbers counting back from the end:

gridRow("1 / -1")

gridRow("2 / 4")

gridRow("1 / 3")

<div
	mix={[
		grid(),
		gridTemplate({ columns: repeat(3, 1), rows: repeat(3, "4rem") }),
		gridAutoFlow("column"),
		gap(4),
		...,
	]}
>
	<div mix={[gridRow("1 / -1"), ...]}>gridRow("1 / -1")</div>
	<div mix={[gridRow("2 / 4"), ...]}>gridRow("2 / 4")</div>
	<div mix={[gridRow("1 / 3"), ...]}>gridRow("1 / 3")</div>
</div>

Starting on a line

Pass a number to start an item on that row line, like gridRow(2); it spans one row from there:

gridRow(2)

gridRow(3)

gridRow(1)

<div
	mix={[
		grid(),
		gridTemplate({ columns: repeat(3, 1), rows: repeat(3, "3rem") }),
		gap(4),
		...,
	]}
>
	<div mix={[gridColumn(1), gridRow(2), ...]}>gridRow(2)</div>
	<div mix={[gridColumn(2), gridRow(3), ...]}>gridRow(3)</div>
	<div mix={[gridColumn(3), gridRow(1), ...]}>gridRow(1)</div>
</div>

Using a custom value

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

u.gridRow("2.75rem")

Applying on a state

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

u.hover(u.gridRow(2))

Responsive design

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

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

Signature

u.gridRow(value: GridLineValue)