layout
grid-template-columns
Applies grid-template-columns/-rows/-areas from whichever option keys are given.
import { gridTemplate } from "@sdxc/u/layout";Quick reference
Every documented call, beside the CSS it emits.
| Call | CSS |
|---|---|
u.gridTemplate({ columns: "1fr 2fr", rows: "auto 1fr" }) | css({ gridTemplateColumns: "1fr 2fr", gridTemplateRows: "auto 1fr" }) |
u.gridTemplate({ areas: '"header header" "sidebar main"' }) | css({ gridTemplateAreas: '"header header" "sidebar main"' }) |
u.gridTemplate({ columns: u.repeat(3, 1) }) | css({ gridTemplateColumns: "repeat(3, 1fr)" }) |
Using a custom value
Every scale argument also takes a raw CSS value, which passes through untouched.
u.gridTemplate({ columns: "1fr 2fr", rows: "auto 1fr" })Applying on a state
Wrap the call in a state utility to scope it to one selector.
u.hover(u.gridTemplate({ columns: "1fr 2fr", rows: "auto 1fr" }))Responsive design
Wrap the call in a container query to scope it to one width.
u.at("md", u.gridTemplate({ columns: "1fr 2fr", rows: "auto 1fr" }))Signature
u.gridTemplate(options?: GridTemplateOptions)