Grid

A powerful CSS Grid layout component that makes it easy to create complex grid layouts with minimal code.

Import

import { Grid } from '@beauginbey/vanilla-components';

Basic Usage

The Grid component provides a simple API for CSS Grid layouts.

import { Grid, Box, Text } from '@beauginbey/vanilla-components';

export default function App() {
  return (
    <Grid columns="3" gap={4}>
      <Box p={4} backgroundColor="3" borderRadius="md">
        <Text>Item 1</Text>
      </Box>
      <Box p={4} backgroundColor="3" borderRadius="md">
        <Text>Item 2</Text>
      </Box>
      <Box p={4} backgroundColor="3" borderRadius="md">
        <Text>Item 3</Text>
      </Box>
      <Box p={4} backgroundColor="3" borderRadius="md">
        <Text>Item 4</Text>
      </Box>
      <Box p={4} backgroundColor="3" borderRadius="md">
        <Text>Item 5</Text>
      </Box>
      <Box p={4} backgroundColor="3" borderRadius="md">
        <Text>Item 6</Text>
      </Box>
    </Grid>
  );
}

Open Sandbox

Responsive Columns

Create responsive grid layouts with different column counts at different breakpoints.

import { Grid, Box, Text } from '@beauginbey/vanilla-components';

export default function App() {
  return (
    <Grid 
      columns={{ mobile: '1', tablet: '2', desktop: '4' }} 
      gap={4}
    >
      {[1, 2, 3, 4, 5, 6, 7, 8].map(i => (
        <Box 
          key={i}
          p={4} 
          backgroundColor="3" 
          borderRadius="md"
        >
          <Text weight="semibold">Card {i}</Text>
          <Text size="sm" color="secondary">
            Responsive grid item
          </Text>
        </Box>
      ))}
    </Grid>
  );
}

Open Sandbox

Custom Grid Templates

For more complex layouts, use custom grid template strings.

import { Grid, Box, Text } from '@beauginbey/vanilla-components';

export default function App() {
  return (
    <Grid 
      columns="1fr 2fr 1fr"
      rows="auto 1fr auto"
      gap={4}
      style={{ height: '300px' }}
    >
      <Box 
        p={3} 
        backgroundColor="3" 
        borderRadius="md"
        style={{ gridColumn: '1 / -1' }}
      >
        <Text weight="semibold">Header (spans all columns)</Text>
      </Box>
      
      <Box p={3} backgroundColor="4" borderRadius="md">
        <Text>Sidebar</Text>
      </Box>
      
      <Box p={3} backgroundColor="2" borderRadius="md">
        <Text>Main Content</Text>
      </Box>
      
      <Box p={3} backgroundColor="4" borderRadius="md">
        <Text>Aside</Text>
      </Box>
      
      <Box 
        p={3} 
        backgroundColor="3" 
        borderRadius="md"
        style={{ gridColumn: '1 / -1' }}
      >
        <Text weight="semibold">Footer (spans all columns)</Text>
      </Box>
    </Grid>
  );
}

Open Sandbox

Auto-Fit and Auto-Fill

Create responsive grids that automatically adjust to content.

import { Grid, Box, Text } from '@beauginbey/vanilla-components';

export default function App() {
  return (
    <Box>
      <Text weight="semibold">Auto-fit Grid</Text>
      <Box marginBottom={2} />
      <Grid 
        columns="repeat(auto-fit, minmax(200px, 1fr))"
        gap={4}
      >
        {[1, 2, 3, 4, 5].map(i => (
          <Box 
            key={i}
            p={4} 
            backgroundColor="3" 
            borderRadius="md"
          >
            <Text>Item {i}</Text>
          </Box>
        ))}
      </Grid>
      
      <Box marginBottom={6} />
      
      <Text weight="semibold">Auto-fill Grid</Text>
      <Box marginBottom={2} />
      <Grid 
        columns="repeat(auto-fill, minmax(200px, 1fr))"
        gap={4}
      >
        {[1, 2, 3].map(i => (
          <Box 
            key={i}
            p={4} 
            backgroundColor="3" 
            borderRadius="md"
          >
            <Text>Item {i}</Text>
          </Box>
        ))}
      </Grid>
    </Box>
  );
}

Open Sandbox

Grid Flow

Control how auto-placed items flow in the grid.

import { Grid, Box, Text } from '@beauginbey/vanilla-components';

export default function App() {
  return (
    <Box>
      <Text weight="semibold">Row Flow (default)</Text>
      <Box marginBottom={2} />
      <Grid columns="3" rows="3" gap={2} style={{ height: '200px' }}>
        {[1, 2, 3, 4, 5].map(i => (
          <Box 
            key={i}
            p={2} 
            backgroundColor="3" 
            borderRadius="sm"
          >
            <Text size="sm">{i}</Text>
          </Box>
        ))}
      </Grid>
      
      <Box marginBottom={4} />
      
      <Text weight="semibold">Column Flow</Text>
      <Box marginBottom={2} />
      <Grid columns="3" rows="3" flow="column" gap={2} style={{ height: '200px' }}>
        {[1, 2, 3, 4, 5].map(i => (
          <Box 
            key={i}
            p={2} 
            backgroundColor="3" 
            borderRadius="sm"
          >
            <Text size="sm">{i}</Text>
          </Box>
        ))}
      </Grid>
    </Box>
  );
}

Open Sandbox

Alignment

Control alignment of grid items.

import { Grid, Box, Text } from '@beauginbey/vanilla-components';

export default function App() {
  return (
    <Grid 
      columns="3"
      gap={4}
      align="center"
      justify="center"
      style={{ height: '200px' }}
    >
      <Box p={2} backgroundColor="3" borderRadius="md" style={{ height: '40px' }}>
        <Text size="sm">Small</Text>
      </Box>
      <Box p={3} backgroundColor="3" borderRadius="md" style={{ height: '60px' }}>
        <Text>Medium</Text>
      </Box>
      <Box p={4} backgroundColor="3" borderRadius="md" style={{ height: '80px' }}>
        <Text size="lg">Large</Text>
      </Box>
    </Grid>
  );
}

Open Sandbox

Gap Control

Fine-tune spacing with separate row and column gaps.

import { Grid, Box, Text } from '@beauginbey/vanilla-components';

export default function App() {
  return (
    <Box>
      <Text weight="semibold">Different row and column gaps</Text>
      <Box marginBottom={2} />
      <Grid 
        columns="3"
        gapX={6}
        gapY={2}
      >
        {[1, 2, 3, 4, 5, 6].map(i => (
          <Box 
            key={i}
            p={3} 
            backgroundColor="3" 
            borderRadius="md"
          >
            <Text>Item {i}</Text>
          </Box>
        ))}
      </Grid>
    </Box>
  );
}

Open Sandbox

Common Patterns

Image Gallery

import { Grid, Box, Text } from '@beauginbey/vanilla-components';

export default function App() {
  return (
    <Grid 
      columns="repeat(auto-fill, minmax(150px, 1fr))"
      gap={2}
    >
      {[1, 2, 3, 4, 5, 6, 7, 8, 9].map(i => (
        <Box 
          key={i}
          backgroundColor="3" 
          borderRadius="md"
          style={{ 
            aspectRatio: '1',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center'
          }}
        >
          <Text color="secondary">Image {i}</Text>
        </Box>
      ))}
    </Grid>
  );
}

Open Sandbox

Dashboard Layout

import { Grid, Box, Text } from '@beauginbey/vanilla-components';

export default function App() {
  return (
    <Grid 
      columns={{ mobile: '1', tablet: 'repeat(4, 1fr)' }}
      rows={{ mobile: 'auto', tablet: 'auto 1fr' }}
      gap={4}
      style={{ minHeight: '400px' }}
    >
      {/* Stats Cards */}
      <Box p={4} backgroundColor="3" borderRadius="lg">
        <Text size="sm" color="secondary">Total Users</Text>
        <Text size="2xl" weight="bold">1,234</Text>
      </Box>
      <Box p={4} backgroundColor="3" borderRadius="lg">
        <Text size="sm" color="secondary">Revenue</Text>
        <Text size="2xl" weight="bold">$12.3k</Text>
      </Box>
      <Box p={4} backgroundColor="3" borderRadius="lg">
        <Text size="sm" color="secondary">Growth</Text>
        <Text size="2xl" weight="bold">+23%</Text>
      </Box>
      <Box p={4} backgroundColor="3" borderRadius="lg">
        <Text size="sm" color="secondary">Active Now</Text>
        <Text size="2xl" weight="bold">89</Text>
      </Box>
      
      {/* Main Content Area */}
      <Box 
        p={4} 
        backgroundColor="2" 
        borderRadius="lg"
        style={{ 
          gridColumn: 'span 3',
          gridRow: '2'
        }}
      >
        <Text size="lg" weight="semibold">Main Dashboard Content</Text>
        <Box marginBottom={2} />
        <Text color="secondary">
          This area spans multiple columns and contains the main content.
        </Text>
      </Box>
      
      {/* Sidebar */}
      <Box 
        p={4} 
        backgroundColor="2" 
        borderRadius="lg"
        style={{ 
          gridColumn: '4',
          gridRow: '2'
        }}
      >
        <Text weight="semibold">Sidebar</Text>
        <Box marginBottom={2} />
        <Text size="sm" color="secondary">
          Additional information
        </Text>
      </Box>
    </Grid>
  );
}

Open Sandbox

Props

Grid accepts all Box props plus the following grid-specific props:

Prop	Type	Default	Description
`columns`	`string`	-	Number of columns or custom grid template
`rows`	`string`	-	Number of rows or custom grid template
`flow`	`'row' \| 'column' \| 'dense' \| 'row dense' \| 'column dense'`	`'row'`	Grid auto flow direction
`align`	`'start' \| 'center' \| 'end' \| 'stretch'`	-	Align grid items
`justify`	`'start' \| 'center' \| 'end' \| 'stretch'`	-	Justify grid items
`gap`	`number`	-	Gap between grid items
`gapX`	`number`	-	Gap between columns
`gapY`	`number`	-	Gap between rows

All props support responsive values.

Column/Row Values

For columns and rows, you can use:

Preset values: '1', '2', '3', '4', '5', '6', '12'
Custom templates: '1fr 2fr', 'repeat(3, 1fr)', '200px 1fr 200px'
Auto-responsive: 'repeat(auto-fit, minmax(200px, 1fr))'

Flex Text