# 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.

```ts
import { repeat } from "@sdxc/u/layout";
```

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.

## 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:

```tsx
<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:

```tsx
<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:

```tsx
<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.

```ts
u.hover(u.gridTemplate({ columns: u.repeat(3, 1) }))
```

## Responsive design

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

```ts
u.at("md", u.gridTemplate({ columns: u.repeat(3, 1) }))
```

## Signature

```ts
u.repeat(count: RepeatCount, track: RepeatTrack)
```