Grid

Stable

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

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.

Source Edit docs Report an issue

Overview

Active signatures

318

Templates

Pending deployments

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>
  );
}

Light, dark and high contrast

Every Stance component is designed and tested in all three appearance modes.

Active signatures

318

Templates

Pending deployments

Light

Active signatures

318

Templates

Pending deployments

Dark

Active signatures

318

Templates

Pending deployments

High contrast

Import

tsx

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

Platforms

Grid has native counterparts. They share Stance tokens and intent, and use each platform’s own controls and conventions. The live previews on this page are the web implementation.

tsx

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

Playground

Templates

Users

Deployments

Integrations

Signatures

Errors

102

tsx

<Grid />

Examples

Fluid columns

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

Department

Legal

Department

Finance

Department

Sales

Department

Support

Department

People

Department

Marketing

Department

Engineering

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

Contract details

Signing parties

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

Prop	Type	Default	Description
`as`	`keyof JSX.IntrinsicElements`	`'div'`	Element to render.
`columns`	`1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 12`	None	Equal columns; collapses responsively.
`minChildWidth`	`string`	None	CSS length; enables fluid auto-fill tracks.
`gap`	`SpaceKey`	`4`	Gap between cells.
`rowGap`	`SpaceKey`	None	Row gap; defaults to gap.
`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.

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

Overview

Active signatures

318

Templates

Pending deployments

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>
  );
}

Light, dark and high contrast

Every Stance component is designed and tested in all three appearance modes.

Active signatures

318

Templates

Pending deployments

Light

Active signatures

318

Templates

Pending deployments

Dark

Active signatures

318

Templates

Pending deployments

High contrast

Examples

Fluid columns

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

Department

Legal

Department

Finance

Department

Sales

Department

Support

Department

People

Department

Marketing

Department

Engineering

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

Contract details

Signing parties

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

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

Overview

Light, dark and high contrast

Import

Platforms

Playground

Examples

Fluid columns

Two columns

API reference

Accessibility

Usage guidelines

Do

Don’t

Related

Overview

Light, dark and high contrast

Import

Platforms

Playground

Examples

Fluid columns

Two columns

API reference

Accessibility

Usage guidelines

Do

Don’t

Related