Skip to main content

​
Overview

The Grid component provides a flexible CSS Grid-based layout system. It includes Grid, GridRow, and GridCell subcomponents for building responsive grid layouts.

​
Components

​
Grid

Main wrapper component for grid layouts.
​
rows
1 | 2 | 3 | 4
default:"1"
Number of rows in the grid
​
columns
1 | 2 | 3 | 4
default:"1"
Number of columns in the grid
​
gap
0 | 1 | 2 | 4 | 8 | 9
default:"4"
Gap spacing between grid items (in Tailwind spacing units)
​
className
string
Additional CSS classes to apply to the grid wrapper
​
children
React.ReactNode
required
Grid content (typically GridRow or GridCell components)

​
GridRow

Row component for horizontal grid layouts.
​
columns
1 | 2 | 3 | 4
default:"1"
Number of columns in this row (responsive: collapses to 1 column on small screens)
​
gap
0 | 1 | 2 | 4 | 8 | 9
default:"4"
Gap spacing between cells in the row
​
className
string
Additional CSS classes to apply to the row
​
children
React.ReactNode
required
Row content (typically GridCell components)

​
GridCell

Individual cell component for grid items.
​
className
string
Additional CSS classes to apply to the cell
​
children
React.ReactNode
required
Cell content

​
Usage

import { Grid, GridRow, GridCell } from '@repo/ui'

export function Example() {
  return (
    <Grid rows={2} gap={8}>
      <GridRow columns={3} gap={4}>
        <GridCell>Cell 1</GridCell>
        <GridCell>Cell 2</GridCell>
        <GridCell>Cell 3</GridCell>
      </GridRow>
      <GridRow columns={2}>
        <GridCell>Cell 4</GridCell>
        <GridCell>Cell 5</GridCell>
      </GridRow>
    </Grid>
  )
}

​
Examples

​
Simple 2-Column Layout

<GridRow columns={2} gap={4}>
  <GridCell>Left content</GridCell>
  <GridCell>Right content</GridCell>
</GridRow>

​
3-Column Card Grid

<GridRow columns={3} gap={8}>
  <GridCell>
    <Card>Card 1</Card>
  </GridCell>
  <GridCell>
    <Card>Card 2</Card>
  </GridCell>
  <GridCell>
    <Card>Card 3</Card>
  </GridCell>
</GridRow>

​
Multi-Row Layout

<Grid rows={3} gap={9}>
  <GridRow columns={4}>
    <GridCell>Header 1</GridCell>
    <GridCell>Header 2</GridCell>
    <GridCell>Header 3</GridCell>
    <GridCell>Header 4</GridCell>
  </GridRow>
  <GridRow columns={2}>
    <GridCell>Main content</GridCell>
    <GridCell>Sidebar</GridCell>
  </GridRow>
  <GridRow columns={1}>
    <GridCell>Footer</GridCell>
  </GridRow>
</Grid>

​
Dashboard Layout

<Grid rows={2} gap={8}>
  <GridRow columns={4} gap={4}>
    <GridCell>
      <StatCard title="Users" value="1,234" />
    </GridCell>
    <GridCell>
      <StatCard title="Revenue" value="$12,345" />
    </GridCell>
    <GridCell>
      <StatCard title="Orders" value="567" />
    </GridCell>
    <GridCell>
      <StatCard title="Growth" value="12%" />
    </GridCell>
  </GridRow>
  <GridRow columns={2} gap={8}>
    <GridCell>
      <Chart />
    </GridCell>
    <GridCell>
      <RecentActivity />
    </GridCell>
  </GridRow>
</Grid>

​
No Gap Grid

<GridRow columns={3} gap={0}>
  <GridCell>Cell 1</GridCell>
  <GridCell>Cell 2</GridCell>
  <GridCell>Cell 3</GridCell>
</GridRow>

​
Responsive Behavior

The Grid component is responsive by default:
  • Multi-column layouts (2, 3, or 4 columns) automatically collapse to 1 column on small screens
  • Single column layouts remain unchanged across all screen sizes
  • Gap spacing is maintained across all breakpoints
{/* This will show 3 columns on desktop, 1 column on mobile */}
<GridRow columns={3}>
  <GridCell>Responsive cell 1</GridCell>
  <GridCell>Responsive cell 2</GridCell>
  <GridCell>Responsive cell 3</GridCell>
</GridRow>

​
Implementation

Source: /home/daytona/workspace/source/packages/ui/src/grid/grid.tsx

Build docs developers (and LLMs) love

Get started for freeTalk to us