Components
CrystalGrid
Responsive grid layout with Fibonacci-based gap spacing.
CrystalGrid provides a responsive CSS Grid layout with gaps aligned to the Fibonacci spacing scale. It handles responsive column counts and consistent spacing.
Import
import { CrystalGrid } from '@artasce/crystal-ui';Usage
<CrystalGrid columns={3} gap="md">
<CrystalTile>Item 1</CrystalTile>
<CrystalTile>Item 2</CrystalTile>
<CrystalTile>Item 3</CrystalTile>
</CrystalGrid>Props
CrystalGrid Props
| Token | Variable | Value |
|---|---|---|
columns | number | { sm?, md?, lg?, xl? } | 3 |
gap | 'none' | 'sm' | 'md' | 'lg' | 'md' |
className | string | — |
children | React.ReactNode | — |
Values update live with theme changes. Click any row to copy the CSS variable.
Gap Mapping
Gap to Fibonacci Scale
| Token | Variable | Value | Preview |
|---|---|---|---|
none | --spacing-0 | 0px | |
sm | --spacing-2 | 8px | |
md | --spacing-3 | 16px | |
lg | --spacing-4 | 24px |
Values update live with theme changes. Click any row to copy the CSS variable.
Responsive Columns
Pass an object to define breakpoint-specific column counts:
<CrystalGrid columns={{ sm: 1, md: 2, lg: 3, xl: 4 }} gap="md">
{items.map(item => (
<CrystalCard key={item.id} {...item} />
))}
</CrystalGrid>