[ @sdxc/u/layout ]
gridTemplate
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)" }) |
Examples
Basic example
Use gridTemplate({ columns }) to define a grid's columns, here four equal tracks with repeat(4, 1):
<div mix={[grid(), gridTemplate({ columns: repeat(4, 1) }), gap(4)]}>
<div mix={[...]}>01</div>
<div mix={[...]}>02</div>
<div mix={[...]}>03</div>
<div mix={[...]}>04</div>
<div mix={[...]}>05</div>
<div mix={[...]}>06</div>
<div mix={[...]}>07</div>
<div mix={[...]}>08</div>
</div>Sizing tracks differently
Write any track list, like "8rem 2fr 1fr", to mix fixed lengths with fractions of the remaining space:
<div mix={[grid(), gridTemplate({ columns: "8rem 2fr 1fr" }), gap(4)]}>
<div mix={[...]}>8rem</div>
<div mix={[...]}>2fr</div>
<div mix={[...]}>1fr</div>
</div>Defining rows
Pass rows beside columns to size the rows too, like "auto 1fr auto" for a header, a body that fills the rest and a footer:
<div
mix={[grid(), gridTemplate({ columns: "8rem 1fr", rows: "auto 1fr auto" }), gap(4), bs(64)]}
>
<div mix={[...]}>auto</div>
<div mix={[...]}>auto</div>
<div mix={[...]}>1fr</div>
<div mix={[...]}>1fr</div>
<div mix={[...]}>auto</div>
<div mix={[...]}>auto</div>
</div>Fitting as many columns as possible
Use repeat("auto-fit", "minmax(8rem, 1fr)") to fit as many columns as the grid's width allows, each at least 8rem wide:
<div mix={[grid(), gridTemplate({ columns: repeat("auto-fit", "minmax(8rem, 1fr)") }), gap(4)]}>
<div mix={[...]}>01</div>
<div mix={[...]}>02</div>
<div mix={[...]}>03</div>
<div mix={[...]}>04</div>
<div mix={[...]}>05</div>
<div mix={[...]}>06</div>
<div mix={[...]}>07</div>
</div>Naming areas
Pass areas to draw the layout as rows of names, then place each child into one with gridArea():
<div
mix={[
grid(),
gridTemplate({
columns: "1fr 1fr 1fr",
areas: '"hero hero aside" "one two aside"',
}),
gap(4),
]}
>
<div mix={[gridArea("hero"), ...]}>hero</div>
<div mix={[gridArea("aside"), ...]}>aside</div>
<div mix={[gridArea("one"), ...]}>one</div>
<div mix={[gridArea("two"), ...]}>two</div>
</div>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)