# rn-grid
URL: /docs/native/docyrus/grid

Responsive grid layout with configurable columns, gap control, and spanning grid items.

## Installation

```bash
pnpm dlx @docyrus/cli add @docyrus/rn-grid
```

## Usage

```tsx
import { Grid, GridItem } from '@/components/docyrus-native/grid';

  
  
  

```

## API Reference

### Grid

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `children` | `ReactNode` | — | Grid items |
| `columns` | `number` | `2` | Number of grid columns |
| `gap` | `number` | `0` | Gap size (theme spacing key or pixel value) |
| `columnGap` | `number` | — | Column gap override |
| `rowGap` | `number` | — | Row gap override |
| `alignItems` | `ViewStyle['alignItems']` | — | Cross-axis alignment |
| `justifyContent` | `ViewStyle['justifyContent']` | — | Main-axis alignment |
| `className` | `string` | — | Additional CSS classes |

### GridItem

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `children` | `ReactNode` | — | Item content |
| `span` | `number` | `1` | Number of columns to span |
| `className` | `string` | — | Item CSS classes |

## Type Exports

| Type | Description |
|------|-------------|
| `GridProps` | Props for Grid component |
| `GridItemProps` | Props for GridItem component |