nuxt-x-cards
Card Grid
Responsive CSS grid wrapper for card collections with configurable columns and gap.
Card Grid
The XCardGrid component is a lightweight CSS grid wrapper. Place any card components inside its default slot. Column breakpoints follow a mobile-first pattern: always 1 column on mobile, then expanding at md and lg. Pair with XCardFeature (or any other card) for collections.
Components
<XCardGrid />
<XCardGrid :columns="3" gap="md">
<XCardFeature
v-for="item in features"
:key="item.title"
:title="item.title"
:description="item.description"
:icon="item.icon"
/>
</XCardGrid>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
columns | 1 | 2 | 3 | 4 | 3 | Maximum number of columns at the largest breakpoint |
gap | 'sm' | 'md' | 'lg' | 'md' | Gap between grid items |
Gap reference (4px grid):
| Value | Mobile | Desktop |
|---|---|---|
sm | 16px | 16px |
md | 24px | 32px |
lg | 32px | 48px |
Column breakpoint reference:
columns | Mobile | md | lg |
|---|---|---|---|
1 | 1 col | 1 col | 1 col |
2 | 1 col | 2 col | 2 col |
3 | 1 col | 2 col | 3 col |
4 | 1 col | 2 col | 4 col |
Slots
| Slot | Description |
|---|---|
default | Card components to render in the grid |
AI Context
component: XCardGrid
package: "@xenterprises/nuxt-x-cards"
category: FeatureCards
use-when: >
Use XCardGrid as the outer container for any XCard component collection.
It is a generic slot-based wrapper that works with any XCard component,
not just XCardFeature.
notes:
- Always 1 column on mobile, expanding at md and lg breakpoints