# gridTemplate

> Applies `grid-template-columns`/`-rows`/`-areas` from whichever option keys are given.

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

Applies `grid-template-columns`/`-rows`/`-areas` from whichever option keys
are given. Track lists vary too continuously for a named scale, so values
are raw CSS strings; repeat builds the `repeat(count, track)` shape.

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

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

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

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

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

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

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

```ts
u.at("md", u.gridTemplate({ columns: "1fr 2fr", rows: "auto 1fr" }))
```

## Signature

```ts
u.gridTemplate(options?: GridTemplateOptions)
```