> ## Documentation Index
> Fetch the complete documentation index at: https://docs.attio.com/llms.txt
> Use this file to discover all available pages before exploring further.

# <Grid />

> Lay children out in a responsive grid.

```js theme={"system"}
import {Grid} from "attio/client"
```

`Grid` fits as many columns as its container allows, up to `maxColumns`, and never lets a column get narrower than `minColumnWidth`. When the container shrinks, the grid drops a column rather than squashing the ones it has, all the way down to a single column. It responds to its container, not the viewport, so the same grid works on a page, in a record tab and in a dialog.

Available on [pages](../pages/overview), [record tabs](../extensions/record-tab) and in [dialogs](../dialogs/show-dialog).

## Example

A grid of [cards](./card) is the standard shape for a dashboard:

```tsx src/app/pages/dashboard/page.tsx theme={"system"}
import React from "react"
import {Extensions, Grid, Card, Typography} from "attio/client"

export default Extensions.definePage({
  name: "Dashboard",
  Page: () => (
    <Grid maxColumns={4} minColumnWidth="small">
      <Card title="Open deals">
        <Typography.Title>42</Typography.Title>
      </Card>
      <Card title="Won this quarter">
        <Typography.Title>$1.2M</Typography.Title>
      </Card>
      <Card title="Avg. cycle">
        <Typography.Title>31 days</Typography.Title>
      </Card>
      <Card title="At risk">
        <Typography.Title>3</Typography.Title>
      </Card>
    </Grid>
  ),
})
```

## Props

<ParamField path="maxColumns" type="1 | 2 | 3 | 4 | 5 | 6 | 'auto'">
  The most columns the grid will ever use. A ceiling, not a fixed count: `"auto"` fits as many as
  the container allows.

  Defaults to `"auto"`.
</ParamField>

<ParamField path="minColumnWidth" type="'small' | 'medium' | 'large'">
  The narrowest a column may get before the grid drops a column instead. `"small"` is 160px,
  `"medium"` is 240px, `"large"` is 320px.

  Defaults to `"medium"`.
</ParamField>

<ParamField path="gap" type="Spacing">
  The space between columns and between rows. See the [spacing tokens](./stack#spacing-tokens).

  Defaults to `"medium"`.
</ParamField>

<ParamField path="align" type="'stretch' | 'start'">
  How children are aligned within their row. `"stretch"` makes every child in a row match the
  tallest one. Use `"start"` when the children hold different kinds of content and should keep
  their natural heights.

  Defaults to `"stretch"`.
</ParamField>

<ParamField path="children" type="React.ReactNode">
  The content of the grid, either text or other components.
</ParamField>