> ## Documentation Index
> Fetch the complete documentation index at: https://docs.omni.co/llms.txt
> Use this file to discover all available pages before exploring further.

# Image grid

> The code for this example can be used in the Markdown visualization to create a grid of images, each of which contains a description and metric.

<img src="https://mintcdn.com/omni-e7402367/NPCbSR0hOlCzzT5f/images/docs/visualization-and-dashboards/visualization-types/markdown/examples/assets/images/imagegrid-02a0d8fbe38dcbdc5f178a497d19f4c5.png?fit=max&auto=format&n=NPCbSR0hOlCzzT5f&q=85&s=c2e15c4d9767276f39e6f5065ddec589" alt="" width="666" height="874" data-path="images/docs/visualization-and-dashboards/visualization-types/markdown/examples/assets/images/imagegrid-02a0d8fbe38dcbdc5f178a497d19f4c5.png" />

## Example code

```html expandable theme={null}
<style>
  .product-image-grid  {
  display: grid;
  grid-template-columns: repeat(3, 98px);
  gap: 7px;
  }
  .product-image-item  {
  display: flex;
  flex-direction: column;
  gap: 7px;
  }
  .product-image  {
  background-size: cover;
  background-position: center;
  height: 100px;
  position: relative;
  }
  .product-rank-number  {
  padding: 2px;
  position: absolute;
  top: 0;
  left: 0;
  background: var(--color-surface-invert);
  color: var(--color-text-inverse);
  }
  .product-name  {
  font-size: 10px;
  margin: 0;
  }
  .product-compare  {
  align-items: center;
  display: flex;
  font-size: 11px;
  gap: 8px;
  font-weight: 500;
  }
</style>
### Top Products This Month

<div class="product-image-grid">{{#result}}
<div class="product-image-item">
  <section class="product-image" style="background-image: url(https://{{product_images.image.value_static}})">
  <p class="product-rank-number">{{sale_price_sum_rank.value}}</p>
</section>
<section class="product-compare"> {{order_items.sale_price_sum.value_static}}<ChangeArrow current="{{order_items.sale_price_sum.value_static}}" comparison="{{order_items.sale_price_sum_1.value_static}}"></ChangeArrow>
</section>
<p class="product-name">{{products.name.value_static}}</p>
</div>{{/result}}
</div>
```