Product
ProductGrid
Responsive product grid layout with configurable columns and gap.
ProductGrid
Wraps CProductCard in a CSS grid with responsive column breakpoints. Pass-through props to each card via cardProps. Shows an empty state when no products.
Preview — 4-column grid
Usage
<CProductGrid
:products="products"
@add-to-cart="handleAddToCart"
@toggle-wishlist="handleWishlist"
/>
Custom Columns
<CProductGrid :products="products" :columns="3" gap="lg" />
With Card Props
<CProductGrid
:products="products"
:card-props="{ showQuickAdd: true, showRating: true, variant: 'soft' }"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
products | Product[] | required | Products to display |
columns | 2 | 3 | 4 | 5 | 6 | 4 | Grid column count |
gap | 'sm' | 'md' | 'lg' | 'md' | Gap between items |
cardProps | Record<string, any> | — | Props passed to each CProductCard |
ui | Partial<{...}> | — | Per-instance theme overrides |
Events
| Event | Payload | Description |
|---|---|---|
add-to-cart | Product | Forwarded from child cards |
toggle-wishlist | Product | Forwarded from child cards |
Slots
| Slot | Scoped Props | Description |
|---|---|---|
item | { product } | Custom card rendering per product |
empty | — | Custom empty state |
Example: Custom Item Rendering
<CProductGrid :products="products">
<template #item="{ product }">
<CProductCard :product="product" variant="ghost" show-quick-add />
</template>
</CProductGrid>