Card Grid
Multiple cards arranged in a responsive grid layout, commonly used for displaying collections of items or data
What is it?
A card grid arranges multiple rectangular cards in rows and columns. Each card is a self-contained unit displaying related information (like a product, article, metric, or item). Card grids are responsive—typically showing 1 column on mobile, 2–3 on tablet, and 3–4 on desktop.
This pattern is widely used for portfolios, product listings, dashboard metrics, blog article previews, team member profiles, and more. Cards often include an image, title, description, and action buttons.
Mockdown
``` ┌───────────────┬───────────────┬───────────────┐ │ │ │ │ │ ┌─────────┐ │ ┌─────────┐ │ ┌─────────┐ │ │ │ [Image] │ │ │ [Image] │ │ │ [Image] │ │ │ │ │ │ │ │ │ │ │ │ │ │ Title │ │ │ Title │ │ │ Title │ │ │ │ │ │ │ │ │ │ │ │ │ │Descript │ │ │Descript │ │ │Descript │ │ │ │ │ │ │ │ │ │ │ │ │ │ [ Btn ] │ │ │ [ Btn ] │ │ │ [ Btn ] │ │ │ └─────────┘ │ └─────────┘ │ └─────────┘ │ │ │ │ │ └───────────────┴───────────────┴───────────────┘ ``` Card grid characteristics: - **Consistent sizing**: All cards are roughly the same height/width (or follow a ratio) - **Spacing**: Regular gaps (gutter) between cards - **Responsive columns**: Adjusts number of columns based on screen size - **Flexible image**: Images scale to fit card width - **Content hierarchy**: Title, description, and action are clearly ordered - **Overflow handling**: Text truncates or wraps predictably within the card
Layouts Using This Pattern
┌───────────────────────────────────────────────┐
│ Logo Search [___________] 🛒 Cart (3) │
├───────────────────────────────────────────────┤
│ │
│ ┌──────────────────┐ Product Name │
│ │ │ ★★★★☆ (128 reviews) │
│ │ ┌──────────┐ │ │
│ │ │ Product │ │ $49.99 $69.99 │
│ │ │ Image │ │ ────────────── │
│ │ │ 📷 │ │ Color: ● ○ ○ ○ │
│ │ └──────────┘ │ Size: S [M] L XL │
│ │ │ │
│ │ ○ ○ ● ○ │ Qty: [ 1 ▾ ] │
│ └──────────────────┘ │
│ [ 🛒 Add to Cart ] │
│ [ ♡ Add to Wishlist ]│
├───────────────────────────────────────────────┤
│ Description │ Reviews │ Shipping │
│ ───────────────────────────────── │
│ Premium quality product with... │
└───────────────────────────────────────────────┘E-Commerce
E-Commerce Product Detail Page
A conversion-optimized product detail page with image gallery, variant selector, add-to-cart, reviews, and related products — for DTC e-commerce stores.
--product-page--gallery--cart
Medium
┌──────────┬────────────────────────────────────┐
│ ☰ Menu │ ◉ Dashboard 🔔 👤 │
│ ├────────────────────────────────────┤
│ ● Home │ ┌────────┐ ┌────────┐ ┌────────┐ │
│ ○ Stats │ │ ▲ 1,234│ │ ● 87% │ │ $9.4K │ │
│ ○ Users │ │ KPI ···│ │ KPI ···│ │ KPI ···│ │
│ ○ Config │ └────────┘ └────────┘ └────────┘ │
│ │ ┌──────────────────────────────┐ │
│ │ │ 📈 Chart │ │
│ │ │ ╱╲ ╱╲ ╱╲ │ │
│ │ │ ╱ ╲╱╱ ╲╱ ╲╱─── │ │
│ │ └──────────────────────────────┘ │
│ │ ┌──────────────────────────────┐ │
│ │ │ Name Role Status │ │
│ │ │ ───── ───── ──────── │ │
│ │ │ Alice Admin ● Active │ │
│ │ │ Bob User ○ Idle │ │
│ │ └──────────────────────────────┘ │
└──────────┴────────────────────────────────────┘Dashboard
SaaS Analytics Dashboard
A full-featured analytics dashboard with KPI cards, revenue charts, user activity tables, and a collapsible sidebar nav — ideal for SaaS admin panels.
--analytics--kpi--charts
Complex
Use these prompts to generate layouts built with this pattern.
Ready to build?
Use this pattern as inspiration when creating UI layouts with AI tools.