# Grid

> Two-dimensional layout with fixed columns that collapse responsively, or fluid auto-fit tracks.

Category: Layout · Status: stable · Package: @bindshq/stance-react@0.1.1 · Docs: https://stanceui.com/components/grid

Use Grid for dashboards, galleries and card collections. Fixed `columns` collapse to two columns on tablets and one on phones. `minChildWidth` instead fits as many columns as there is room for, which suits galleries of unknown size.

## Import

```tsx
import { Grid } from '@bindshq/stance-react';
```

Styles are imported once per app: `@bindshq/stance-tokens/css` and `@bindshq/stance-react/styles.css`.

## Examples

### Fixed columns

```tsx
import { Box, Grid, Text } from '@bindshq/stance-react';

const Cell = ({ title, value }: { title: string; value: string }) => (
  <Box padding={4} background="surface" border radius="lg">
    <Text size="xs" tone="muted">
      {title}
    </Text>
    <Text size="xl" weight="semibold" tabular>
      {value}
    </Text>
  </Box>
);

export function Basic() {
  return (
    <Grid columns={3} gap={4} style={{ width: '100%' }}>
      <Cell title="Active signatures" value="318" />
      <Cell title="Templates" value="24" />
      <Cell title="Pending deployments" value="3" />
    </Grid>
  );
}
```

### Fluid columns

Each cell is at least 160px wide; the number of columns follows the container.

```tsx
import { Box, Grid, Text } from '@bindshq/stance-react';

const Cell = ({ title, value }: { title: string; value: string }) => (
  <Box padding={4} background="surface" border radius="lg">
    <Text size="xs" tone="muted">
      {title}
    </Text>
    <Text size="xl" weight="semibold" tabular>
      {value}
    </Text>
  </Box>
);

export function Fluid() {
  return (
    <Grid minChildWidth="160px" gap={3} style={{ width: '100%' }}>
      {['Legal', 'Finance', 'Sales', 'Support', 'People', 'Marketing', 'Engineering'].map((d) => (
        <Cell key={d} title="Department" value={d} />
      ))}
    </Grid>
  );
}
```

### Two columns

```tsx
import { Box, Grid, Text } from '@bindshq/stance-react';

export function TwoColumn() {
  return (
    <Grid columns={2} gap={6} style={{ width: '100%' }}>
      <Box padding={5} background="subtle" radius="lg">
        <Text size="sm">Contract details</Text>
      </Box>
      <Box padding={5} background="subtle" radius="lg">
        <Text size="sm">Signing parties</Text>
      </Box>
    </Grid>
  );
}
```

## API reference

| Component | Prop | Type | Default | Description |
| --- | --- | --- | --- | --- |
| Grid | `as` | `keyof JSX.IntrinsicElements` | `'div'` | Element to render. |
| Grid | `columns` | `1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 12` | None | Equal columns; collapses responsively. |
| Grid | `minChildWidth` | `string` | None | CSS length; enables fluid auto-fill tracks. |
| Grid | `gap` | `SpaceKey` | `4` | Gap between cells. |
| Grid | `rowGap` | `SpaceKey` | None | Row gap; defaults to gap. |
| Grid | `align` | `'start' \| 'center' \| 'end' \| 'stretch'` | None | Vertical alignment of cells. |

## Accessibility

- Grid is presentational; source order is the reading order on every screen size.
- For tabular data, use Table, not Grid.

## Guidelines

**Do**

- Use fluid columns for galleries.
- Keep related cells adjacent in source order.

**Don’t**

- Use Grid to lay out data that has row/column relationships; use Table.

## Related

- https://stanceui.com/components/stack
- https://stanceui.com/components/stat-card
- https://stanceui.com/components/container