<Grid />

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, record tabs and in dialogs.

Example

A grid of cards is the standard shape for a dashboard:

src/app/pages/dashboard/page.tsx

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

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

'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".

Spacing

The space between columns and between rows. See the spacing tokens.Defaults to "medium".

'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".

React.ReactNode

The content of the grid, either text or other components.

Introduction

Guides

Extensions

Pages

Workflow blocks

Notifications

Dialogs

Navigation

Components

Forms

Icons

Settings

GraphQL

Data fetching

Server

System

Legacy

Example

Props

​Example

​Props

Example

Props