Grid

The Grid component implements a responsive layout grid that adapts to screen size and orientation, ensuring consistency across layouts.

Import

import { Grid } from '@lazy-panda-ui/lazy-panda-ui';

Usage

import React from 'react';
import { Grid } from '@lazy-panda-ui/lazy-panda-ui';

function MyComponent() {
  return (
    <Grid container spacing="md">
      <Grid item xs={12} sm={6} md={4}>
        <Box>Item 1</Box>
      </Grid>
      <Grid item xs={12} sm={6} md={4}>
        <Box>Item 2</Box>
      </Grid>
      <Grid item xs={12} sm={6} md={4}>
        <Box>Item 3</Box>
      </Grid>
    </Grid>
  );
}

Props

Grid Container Props

Name	Type	Default	Description
container	boolean	false	Whether the grid is a container
spacing	'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'	'none'	Grid spacing between items
direction	'row' | 'column' | 'row-reverse' | 'column-reverse'	'row'	Grid container direction
justify	'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly'	'flex-start'	Main axis alignment
align	'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline'	'stretch'	Cross axis alignment
wrap	'nowrap' | 'wrap' | 'wrap-reverse'	'wrap'	Wrapping behavior

Grid Item Props

Name	Type	Default	Description
item	boolean	false	Whether the grid is an item
xs	number | 'auto'	-	Grid columns for xs breakpoint
sm	number | 'auto'	-	Grid columns for sm breakpoint
md	number | 'auto'	-	Grid columns for md breakpoint
lg	number | 'auto'	-	Grid columns for lg breakpoint
xl	number | 'auto'	-	Grid columns for xl breakpoint
grow	boolean	false	Whether item should grow
shrink	boolean	false	Whether item should shrink

Examples

Basic Grid

<Grid container spacing="md">
  <Grid item xs={6}>
    <Box>Half width</Box>
  </Grid>
  <Grid item xs={6}>
    <Box>Half width</Box>
  </Grid>
</Grid>

Responsive Grid

<Grid container spacing="md">
  <Grid item xs={12} sm={6} md={4} lg={3}>
    <Box>Responsive item</Box>
  </Grid>
  <Grid item xs={12} sm={6} md={4} lg={3}>
    <Box>Responsive item</Box>
  </Grid>
  <Grid item xs={12} sm={6} md={4} lg={3}>
    <Box>Responsive item</Box>
  </Grid>
  <Grid item xs={12} sm={6} md={4} lg={3}>
    <Box>Responsive item</Box>
  </Grid>
</Grid>

Grid with Different Alignments

<Grid
  container
  spacing="md"
  justify="space-between"
  align="center"
>
  <Grid item xs="auto">
    <Box>Left aligned</Box>
  </Grid>
  <Grid item xs="auto">
    <Box>Center aligned</Box>
  </Grid>
  <Grid item xs="auto">
    <Box>Right aligned</Box>
  </Grid>
</Grid>

Nested Grid

<Grid container spacing="md">
  <Grid item xs={12} sm={6}>
    <Grid container spacing="sm">
      <Grid item xs={6}>
        <Box>Nested item</Box>
      </Grid>
      <Grid item xs={6}>
        <Box>Nested item</Box>
      </Grid>
    </Grid>
  </Grid>
  <Grid item xs={12} sm={6}>
    <Box>Regular item</Box>
  </Grid>
</Grid>

Layout Examples

Card Grid

<Grid container spacing="md">
  {cards.map((card) => (
    <Grid key={card.id} item xs={12} sm={6} md={4}>
      <Card>
        <Card.Header title={card.title} />
        <Card.Content>{card.content}</Card.Content>
      </Card>
    </Grid>
  ))}
</Grid>

Dashboard Layout

<Grid container spacing="md">
  <Grid item xs={12} md={8}>
    <Box>Main content area</Box>
  </Grid>
  <Grid item xs={12} md={4}>
    <Box>Sidebar</Box>
  </Grid>
</Grid>

Spacing

The Grid component supports predefined spacing values:

// No spacing
<Grid container spacing="none">...</Grid>

// Extra small spacing
<Grid container spacing="xs">...</Grid>

// Small spacing
<Grid container spacing="sm">...</Grid>

// Medium spacing
<Grid container spacing="md">...</Grid>

// Large spacing
<Grid container spacing="lg">...</Grid>

// Extra large spacing
<Grid container spacing="xl">...</Grid>

Best Practices

1. Use consistent spacing within sections
2. Consider mobile-first approach
3. Avoid deeply nested grids
4. Use auto-sizing wisely
5. Keep layouts simple and intuitive
6. Use appropriate breakpoints
7. Test responsive behavior

API Reference

Breakpoints

The Grid uses these default breakpoints:

const breakpoints = {
  xs: 0,    // Extra small devices
  sm: 600,  // Small devices
  md: 960,  // Medium devices
  lg: 1280, // Large devices
  xl: 1920, // Extra large devices
};

Column System

The Grid uses a 12-column system:

<Grid container>
  <Grid item xs={12}>...</Grid>  // Full width
  <Grid item xs={6}>...</Grid>   // Half width
  <Grid item xs={4}>...</Grid>   // One-third width
  <Grid item xs={3}>...</Grid>   // One-quarter width
</Grid>

Related Components

• Box - Basic layout component
• Container - Responsive wrapper
• Stack - Linear layout component