# Product Cards Grid

> A responsive grid of product cards with images, metrics, and clean layouts for displaying multiple items at a glance.

A responsive grid of product cards with images, metrics, and clean layouts for displaying multiple items at a glance.

**Best for**: E-commerce dashboards, product catalogs, inventory displays

**Key techniques**: CSS Grid responsive layout, image handling with `.raw`, looped card generation

## Template Code

```html
<style>
  .deals-container {
    display: grid;
    padding: 1.5rem;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    column-gap: 1.5rem;
    row-gap: 2rem;
    list-style: none;
  }

  @media (min-width: 1024px) {
    .deals-container {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (min-width: 1536px) {
    .deals-container {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      column-gap: 2rem;
    }
  }

  .deal-container {
    overflow: hidden;
    border-radius: 0.75rem;
    border: 1px solid #E5E7EB;
    list-style: none;
  }

  .deal-header {
    display: flex;
    padding: 1.5rem;
    column-gap: 1rem;
    align-items: center;
    border-bottom: 1px solid rgb(17 24 39 / 0.05);
    background-color: #F9FAFB;
  }

  .deal-logo {
    object-fit: cover;
    flex: none;
    border-radius: 0.5rem;
    border: 1px solid rgb(229 231 235);
    width: 4rem;
    height: 4rem;
    background-color: #ffffff;
  }

  .deal-name {
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.5rem;
    color: #111827;
  }

  .deal-details {
    padding: 1rem 1.5rem;
    font-size: 0.875rem;
    line-height: 1.5rem;
  }

  .deal-details-inner {
    display: flex;
    padding: 0.3rem 0;
    column-gap: 1rem;
    justify-content: space-between;
  }

  .text-gray-500 {
    color: rgb(107 114 128);
  }

  .text-gray-900 {
    color: rgb(17 24 39);
  }

  .font-medium {
    font-weight: 500;
  }

  .revenue-badge {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 0.375rem;
    font-weight: 500;
    color: rgb(21 128 61);
    background-color: rgb(240 253 244);
    border: 1px solid rgb(22 163 74 / 0.1);
  }
</style>

{% map(rows) %}

  
    
    {{ `Name` }}
  

  <dl class="deal-details">
    
      <dt class="text-gray-500">Revenue</dt>
      <dd>{{ values.`Revenue` }}</dd>
    

    
      <dt class="text-gray-500">Category</dt>
      <dd class="font-medium text-gray-900">{{ `Category Name` }}</dd>
    

    
      <dt class="text-gray-500">Price</dt>
      <dd class="font-medium text-gray-900">{{ values.`Total Price` }}</dd>
    
  </dl>

{% end %}

```

## Required Data Fields

| Field | Type | Description |
|-------|------|-------------|
| `Name` | Dimension | Product name |
| `Product Image Url` | Dimension | URL to product image |
| `Category Name` | Dimension | Product category |
| `Revenue` | Measure | Revenue metric |
| `Total Price` | Measure | Price metric |

## Sample Data

Import this data into Holistics to use: [sample-data-card-grid.csv](https://media.holistics.io/d1a61ae6-sample-data-card-grid.csv)

```csv
Name,Product Image Url,Category Name,Total Price,Revenue
Samsung Bluetooth Earphone,https://m.media-amazon.com/images/I/61xtSvzyi1L._AC_UL320_.jpg,Audio Gadgets,32615,$102414.00
Sony Headphone 1,https://m.media-amazon.com/images/I/61qzLC0pG+L._AC_UY218_.jpg,Audio Gadgets,29529,$96082.00
Face Cream,https://m.media-amazon.com/images/I/61El1UzIVVL._AC_UL320_.jpg,Face,8832,$107831.00
Playstation 4,https://media.holistics.io/j4wlo8-Group-2884.png,Gaming,31842,$126679.00
Sony Xperia 1,https://media.holistics.io/tdcmvm-Group-2882.png,Mobiles,39826,$169948.00
Apple Watch 1,https://media.holistics.io/1pm8rk-Group-2887.png,Smartwatches,24887,$128789.00
```

## Customization Tips

- Adjust the grid breakpoints in `@media` queries for different responsive behavior
- Change the `.revenue-badge` colors to highlight different value ranges
- Add more detail rows by duplicating the `.deal-details-inner` block
- Use `.raw` for image URLs to ensure proper rendering