Grid
A responsive CSS Grid wrapper that automatically adapts column count based on screen size. Perfect for card layouts, image galleries, and dashboard widgets.
Column Variations
2 Columns
Item 1
Item 2
Item 3
Item 4
3 Columns (Default)
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
4 Columns
1
2
3
4
Gap Sizes
No Gap
No Gap
No Gap
Large Gap
Large Gap
Large Gap
Props
| Name | Type | Default | Description |
|---|---|---|---|
cols | '1' | '2' | '3' | '4' | '6' | '12' | '3' | Number of columns (responsive) |
gap | 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'md' | Gap between grid items |
className | string | - | Additional CSS classes |
children* | React.ReactNode | - | Grid items |
Responsive Behavior
The Grid component automatically adjusts columns based on screen size:
- cols="2": 1 col (mobile) → 2 cols (desktop)
- cols="3": 1 col (mobile) → 2 cols (tablet) → 3 cols (desktop)
- cols="4": 1 col (mobile) → 2 cols (tablet) → 4 cols (desktop)
- cols="6": 2 cols (mobile) → 3 cols (tablet) → 6 cols (desktop)
- cols="12": 4 cols (mobile) → 6 cols (tablet) → 12 cols (desktop)
Usage Guidelines
When to use
- •For card layouts and product grids
- •For image galleries and media displays
- •For dashboard widgets and metrics
- •When you need equal-width columns
Best practices
- •Use cols="3" for most card layouts
- •Use cols="2" for larger content cards
- •Use cols="4" for compact items like icons or thumbnails
- •Match gap size to the visual weight of content
- •Ensure grid items have consistent heights for best appearance
Accessibility
- •Grid items reflow naturally on smaller screens
- •Keyboard navigation works left-to-right, top-to-bottom
- •Screen readers announce items in source order
Do's and Don'ts
✓ Do
- •Use consistent content within grid items
- •Match gap size to your design system spacing
- •Use appropriate column counts for content type
Card 1
Consistent content
Card 2
Consistent content
Card 3
Consistent content
✗ Don't
- •Mix wildly different content heights
- •Use too many columns on small screens
- •Overcrowd grids with excessive content
Tall Card
This card has much more content than the others, creating an unbalanced layout. It stretches vertically while others remain short.
Short
Also Short
Related Components
Stack
Arrange items vertically or horizontally with consistent spacing
Card
Container for grouping related content
Spacing
Consistent spacing tokens for gaps and margins