# Grid

Rows × columns grid layout

## Installation

  <TabsTrigger value="cli">Command</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>

```bash
npx shadcn@latest add @termcn/grid
```

<Step>Copy and paste the following code into your project.</Step>

```tsx
/* @jsxImportSource @opentui/react */
import React from "react";
import type { ReactNode } from "react";

export interface GridProps {
  columns: number;
  gap?: number;
  children: ReactNode;
}

export const Grid = ({ columns, gap = 0, children }: GridProps) => {
  const items = React.Children.toArray(children);
  const rows: ReactNode[][] = [];

  for (let i = 0; i < items.length; i += columns) {
    rows.push(items.slice(i, i + columns));
  }

  return (
    <box flexDirection="column">
      {rows.map((row, rowIdx) => (
        <box key={rowIdx} flexDirection="row">
          {row.map((cell, colIdx) => (
            <box key={colIdx} flexGrow={1}>
              {cell}
            </box>
          ))}
        </box>
      ))}
    </box>
  );
};
```

<Step>Update the import paths to match your project setup.</Step>

## Usage

```tsx
import { Grid } from "@/components/ui/grid";
```

```tsx
<Grid columns={3} gap={1}>
  <Text>A</Text>
  <Text>B</Text>
  <Text>C</Text>
  <Text>D</Text>
  <Text>E</Text>
  <Text>F</Text>
</Grid>
```

## API Reference

### Grid

| Prop       | Type        | Default    |
| ---------- | ----------- | ---------- |
| `columns`  | `number`    | `required` |
| `gap`      | `number`    | `0`        |
| `children` | `ReactNode` | `required` |