MetricGrid

A responsive grid layout for displaying multiple StatsCard components. Automatically adjusts columns based on screen size.

Features

Responsive grid layout
Customizable column count
Adjustable gap spacing
Displays multiple StatsCards
Mobile-friendly

Examples

Basic MetricGrid

Total Revenue

$45,231.89

Total Users

2,543

Conversion Rate

4.8%

Active Sessions

542

<script>
  import { MetricGrid } from '$lib';

  const items = [
    { label: 'Total Revenue', value: '$45,231.89', color: 'primary' },
    { label: 'Total Users', value: '2,543', color: 'success' },
    { label: 'Conversion Rate', value: '4.8%', color: 'warning' },
    { label: 'Active Sessions', value: '542', color: 'info' }
  ];
</script>

<MetricGrid {items} columns={4} gap="md" />

Props

Prop	Type	Default	Description
`items`	`StatsCardItem[]`	Required	Array of stats card items
`columns`	`number`	4	Number of columns in grid
`gap`	`'sm' \| 'md' \| 'lg'`	'md'	Gap between items

Best Practices

Use for dashboard overview sections
Adjust columns based on content
Use consistent spacing with gap prop
Limit to 4-6 items for clarity