[ @sdxc/u/layout ]

grid-area

Applies grid-area, placing an element in a named area of its parent's grid-template-areas.

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

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

Quick reference

Every documented call, beside the CSS it emits.

Call	CSS
`u.gridArea("header")`	`css({ gridArea: "header" })`

Examples

Basic example

Use gridArea(name) to place an element in an area named by its grid's gridTemplate({ areas }):

header

main

<div
	mix={[
		grid(),
		gridTemplate({
			columns: "10rem 1fr",
			rows: "auto 8rem auto",
			areas: '"header header" "sidebar main" "footer footer"',
		}),
		gap(4),
	]}
>
	<header mix={[gridArea("header"), ...]}>header</header>
	<aside mix={[gridArea("sidebar"), ...]}>sidebar</aside>
	<main mix={[gridArea("main"), ...]}>main</main>
	<footer mix={[gridArea("footer"), ...]}>footer</footer>
</div>

Applying on a state

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

u.hover(u.gridArea("header"))

Responsive design

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

u.at("md", u.gridArea("header"))

Signature

u.gridArea(name: string)