Grid

A component that arranges child elements into rows and columns with consistent spacing.

Import

import Grid from '@/components/layout/Grid';

Features

Configurable number of columns
Consistent spacing between items
Automatic row organization
Responsive layout support
Compatible with any child components

Props

Prop	Type	Default	Description
`columns`	`number`	`2`	Number of columns in the grid
`spacing`	`number`	`16`	Spacing between items (in points)
`className`	`string`	—	Additional Tailwind classes
`style`	`StyleProp<ViewStyle>`	—	Additional style object
`children`	`React.ReactNode[]`	Required	Items to display in the grid

Basic Usage

// Simple two-column grid
<Grid columns={2} spacing={12}>
  <Card title="Item 1" />
  <Card title="Item 2" />
  <Card title="Item 3" />
  <Card title="Item 4" />
</Grid>
 
// Three-column grid with custom spacing
<Grid columns={3} spacing={8}>
  <View className="bg-blue-200 p-4 rounded">
    <Text>Item 1</Text>
  </View>
  <View className="bg-green-200 p-4 rounded">
    <Text>Item 2</Text>
  </View>
  <View className="bg-red-200 p-4 rounded">
    <Text>Item 3</Text>
  </View>
</Grid>
 
// Grid with custom styling
<Grid 
  columns={2} 
  spacing={16}
  className="bg-gray-100 p-4 rounded-lg"
>
  <Card title="Product 1" />
  <Card title="Product 2" />
</Grid>

Grid

Grid

Import

Features

Props

Basic Usage

On this page