# Grid

Lays out children on a responsive grid.

[View source and API](https://github.com/tempoxyz/ds/blob/main/src/web/components/Grid.tsx)

## Overview

A grid lays out children on a CSS grid, with a fixed column count or as many tracks as the width allows.

Use it for collections of similar items, such as cards.

## Examples

### Basic

```tsx
import { Grid, Inset, style } from '@tempoxyz/ds'

export function Demo() {
  return (
    <Grid columns="3" gap="4">
      {[1, 2, 3].map((n) => (
        <Inset key={n} space="4" {...styles.card()}>
          Column {n}
        </Inset>
      ))}
    </Grid>
  )
}

namespace styles {
  export const card = style({ backgroundColor: 'background.surface', borderRadius: '4xl' })
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Grid/Basic.tsx)

### Fit

Set `fit` to `small`, `medium`, or `large` to fit as many tracks as the width allows, at a minimum of 10rem, 14rem, or 20rem. It takes precedence over `columns`.

```tsx
import { Grid, Inset, style } from '@tempoxyz/ds'

export function Demo() {
  return (
    <Grid fit="medium" gap="4">
      {[1, 2, 3, 4].map((n) => (
        <Inset key={n} block="6" inline="8" {...styles.card()}>
          Fit {n}
        </Inset>
      ))}
    </Grid>
  )
}

namespace styles {
  export const card = style({ backgroundColor: 'background.surface', borderRadius: '4xl' })
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Grid/Fit.tsx)

### Columns

Set `columns` to `1`, `2`, `3`, `4`, `6`, or `12` equal tracks.

```tsx
import { Grid, Inset, Stack, style } from '@tempoxyz/ds'

export function Demo() {
  return (
    <Stack gap="6">
      {(['2', '3', '4'] as const).map((columns) => (
        <Grid columns={columns} gap="2" key={columns}>
          {Array.from({ length: Number(columns) }, (_, index) => (
            <Inset key={index} space="4" {...styles.card()}>
              {columns} columns
            </Inset>
          ))}
        </Grid>
      ))}
    </Stack>
  )
}

namespace styles {
  export const card = style({ backgroundColor: 'background.surface', borderRadius: '4xl' })
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Grid/Columns.tsx)

### Gap

Set `gap` to a spacing token. It defaults to `6`, and `rowGap` and `columnGap` override it on one axis.

```tsx
import { Grid, Inset, style } from '@tempoxyz/ds'

export function Demo() {
  return (
    <Grid columnGap="2" columns="3" rowGap="8">
      {[1, 2, 3, 4, 5, 6].map((n) => (
        <Inset key={n} space="4" {...styles.card()}>
          Column {n}
        </Inset>
      ))}
    </Grid>
  )
}

namespace styles {
  export const card = style({ backgroundColor: 'background.surface', borderRadius: '4xl' })
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Grid/Gap.tsx)

## Guidelines

TODO: Write guidelines for Grid.