[ @sdxc/u/layout ]
grid-template-columns
Builds a repeat(...) track-list value string for u.gridTemplate()'s columns/rows options, or any grid-template-columns/-rows use, since track sizing varies too continuously for a named scale to usefully cover.
import { repeat } from "@sdxc/u/layout";Quick reference
Every documented call, beside the CSS it emits.
| Call | CSS |
|---|---|
u.gridTemplate({ columns: u.repeat(3, 1) }) | css({ gridTemplateColumns: "repeat(3, 1fr)" }) |
u.gridTemplate({ columns: u.repeat("auto-fit", "minmax(140px, 1fr)") }) | css({ gridTemplateColumns: "repeat(auto-fit, minmax(140px, 1fr))" }) |
Examples
Basic example
Use repeat(count, track) to build a track list for gridTemplate(), where a bare number like repeat(3, 1) means equal 1fr columns:
<div mix={[grid(), gridTemplate({ columns: repeat(3, 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>Fitting as many columns as fit
Pass "auto-fit" as the count and a minmax() track to fit as many columns as the width allows. Resize the window to see the columns reflow:
<div mix={[grid(), gridTemplate({ columns: repeat("auto-fit", "minmax(7rem, 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>Fixed-size tracks
Pass a length as the track, like repeat(4, "4rem"), for columns or rows of a fixed size:
<div
mix={[grid(), gridTemplate({ columns: repeat(4, "4rem"), rows: repeat(2, "4rem") }), gap(2)]}
>
<div mix={[...]} />
<div mix={[...]} />
<div mix={[...]} />
<div mix={[...]} />
<div mix={[...]} />
<div mix={[...]} />
<div mix={[...]} />
<div mix={[...]} />
</div>Applying on a state
Wrap the call in a state utility to scope it to one selector.
u.hover(u.gridTemplate({ columns: u.repeat(3, 1) }))Responsive design
Wrap the call in a container query to scope it to one width.
u.at("md", u.gridTemplate({ columns: u.repeat(3, 1) }))Signature
u.repeat(count: RepeatCount, track: RepeatTrack)