Back to Components
Layout
Grid and layout components with Fibonacci-based spacing
CrystalGrid
Responsive grid container with Fibonacci-based gap values. Supports fixed column counts or auto-fit with minimum column width.
Auto-fit (default)
Cell 1
Cell 2
Cell 3
Cell 4
Cell 5
Cell 6
Fixed Columns
columns=2
Cell 1
Cell 2
Cell 3
Cell 4
columns=3
Cell 1
Cell 2
Cell 3
Cell 4
Cell 5
Cell 6
columns=4
1
2
3
4
5
6
7
8
Fibonacci Gap Sizes
Gap values follow the Fibonacci scale: xs=4px, sm=8px, md=16px, lg=24px, xl=40px.
gap="xs" (4px)
1
2
3
4
gap="sm" (8px)
1
2
3
4
gap="md" (16px)
1
2
3
4
gap="lg" (24px)
1
2
3
4
gap="xl" (40px)
1
2
3
4
Real-World Example
AI Solutions
Custom agents and LLM integration
Autonomous systems that work 24/7.
Web Development
Next.js, Nuxt, and React
High-performance web applications.
Mobile Apps
Flutter cross-platform
Native performance on iOS and Android.
Usage
CrystalGrid
import { CrystalGrid } from '@artasce/crystal-ui';
// Auto-fit with minimum width
<CrystalGrid gap="lg" minColumnWidth={280}>
<Card>...</Card>
<Card>...</Card>
<Card>...</Card>
</CrystalGrid>
// Fixed 3 columns
<CrystalGrid columns={3} gap="md">
<Card>...</Card>
<Card>...</Card>
<Card>...</Card>
</CrystalGrid>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| columns | number | 'auto' | 'auto' | Column count or auto-fit |
| minColumnWidth | number | 280 | Min width when columns='auto' |
| gap | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'md' | Fibonacci-based gap |
| alignItems | CSS align-items | 'stretch' | Vertical alignment |