Component
Grid
Responsive grid layout with customizable columns per breakpoint.
tsx
import { Grid, Container, Box } from 'wss3-forge'Usage
•
Use for responsive layouts
•
Columns can vary by breakpoint
•
Gap supports size tokens
•
Container for max-width content
1
2
3
4
5
6
Examples
Fixed Columns
1
2
3
4
5
6
tsx
1<Grid columns={3} gap="md">2 <Card padding="md">1</Card>3 <Card padding="md">2</Card>4 <Card padding="md">3</Card>5 <Card padding="md">4</Card>6 <Card padding="md">5</Card>7 <Card padding="md">6</Card>8</Grid>Responsive Columns
Item 1
Item 2
Item 3
Item 4
tsx
1<Grid columns={{ xs: 1, sm: 2, md: 3, lg: 4 }} gap="md">2 <Card padding="md">Item 1</Card>3 <Card padding="md">Item 2</Card>4 <Card padding="md">Item 3</Card>5 <Card padding="md">Item 4</Card>6</Grid>Gap Variations
Large gap
Between items
tsx
1<Grid columns={2} gap="lg">2 <Card padding="lg">Large gap</Card>3 <Card padding="lg">Between items</Card>4</Grid>Dashboard Layout
Users
1,234
Revenue
$45K
tsx
1<Grid columns={{ xs: 1, md: 2, lg: 3 }} gap="md">2 <StatCard icon={<People20Regular />} label="Users" value="1,234" color="var(--brand-primary)" />3 <StatCard icon={<Money20Regular />} label="Revenue" value="$45K" color="var(--color-success)" />4 <StatCard icon={<Cart20Regular />} label="Orders" value="856" color="var(--color-warning)" />5</Grid>Previous
Card
Next
ImageCard
Last updated: December 2025