import { Grid } from '@primitivekit/react';

<Grid columns={3}>
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
  <div>Item 5</div>
  <div>Item 6</div>
</Grid>

<Grid columns={2}>
  <div>Column 1</div>
  <div>Column 2</div>
</Grid>

<Grid columns={4}>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</Grid>

<Grid columns={3} gap="small">
  <div>Small gap</div>
  <div>Small gap</div>
  <div>Small gap</div>
</Grid>

<Grid columns={3} gap="large">
  <div>Large gap</div>
  <div>Large gap</div>
  <div>Large gap</div>
</Grid>

<Grid 
  columns={{ base: 1, sm: 2, md: 3, lg: 4 }}
  gap="medium"
>
  <div>Responsive</div>
  <div>Grid</div>
  <div>Layout</div>
  <div>Items</div>
</Grid>

<Grid autoFit minColumnWidth="200px" gap="medium">
  <div>Auto</div>
  <div>Fit</div>
  <div>Columns</div>
  <div>Based</div>
  <div>On</div>
  <div>Width</div>
</Grid>

<Grid
  columns={3}
  style={{
    '--grid-gap': '32px',
    '--grid-column-gap': '24px',
    '--grid-row-gap': '40px',
  }}
>
  <div>Custom</div>
  <div>Grid</div>
  <div>Spacing</div>
</Grid>

<Grid columns={{ base: 1, sm: 2, md: 3, lg: 4 }} gap="large">
  {products.map(product => (
    <Card key={product.id}>
      <img src={product.image} alt={product.name} />
      <h3>{product.name}</h3>
      <p>${product.price}</p>
    </Card>
  ))}
</Grid>

<Grid columns={{ base: 1, md: 2, lg: 3 }} gap="medium">
  <Card>
    <h3>Total Users</h3>
    <p>1,234</p>
  </Card>
  
  <Card>
    <h3>Revenue</h3>
    <p>$12,345</p>
  </Card>
  
  <Card>
    <h3>Orders</h3>
    <p>567</p>
  </Card>
</Grid>