---
title: "Frozen Cards | Features"
description: "Let users freeze, or fix, cards to the top or bottom of your grid's card layout."
url: https://www.zinggrid.com/docs/features/frozen-cards
---

```text
experiment_id: web-retrieval-v1
fixture_id: /docs/features/frozen-cards.md
mode: provenance
representation: markdown
origin_response_id: 4dfb2472ee634a956d4a6a849d9edcd9
version: 2026-10-21
version_created_at_utc: 2026-10-21T20:42:35.689Z
version_nonce: ed9e92464d2797ceba5c9770784ea799
generated_at_utc: 2026-10-26T04:31:22.840Z
response_nonce: 262c416f2362ad930aee5fa2d95702f0
```

# Frozen Cards

When your grid is in card layout, cards can be frozen to either the top or bottom of the grid. Frozen cards stay in place while the rest of the card grid scrolls, so they're always visible in the same position. Enable this by adding `frozen-cards-top` and/or `frozen-cards-bottom` to `<zing-grid>`.

This is the card layout equivalent of [Frozen Rows](https://www.zinggrid.com/docs/features/frozen-rows) - `frozen-rows-top`/`frozen-rows-bottom` freeze rows in row layout, while `frozen-cards-top`/`frozen-cards-bottom` freeze cards in card layout. The two are tracked independently, so a grid can switch between layouts without losing either setting.

> **Note:** `frozen-cards-top`/`frozen-cards-bottom` requires the grid to support card layout - add `layout="card"` to force card mode, or `layout-controls` to let users toggle between row and card layout themselves. They have no visible effect while the grid is in row layout.

## Setting Frozen Cards

Frozen cards can be set by setting a numeric value `n` to the `<zing-grid>` attributes `frozen-cards-top` and/or `frozen-cards-bottom`. This will automatically freeze the first `n` cards to the top of the grid, or the final `n` cards to the bottom of the grid, each in its own sticky band above/below the scrollable card area.

```html
<zing-grid frozen-cards-top="1" frozen-cards-bottom="1"
  height=500
  layout="card"
  src="https://cdn.zinggrid.com/datasets/aapl-stock-data.json">
</zing-grid>
```

### Frozen Cards Grid
Here is a complete grid with a frozen top and bottom card:

[Example code](https://app.zingsoft.com/demos/embed/U7REPUSG)

## Context Menu

If context menu is turned on, you can freeze/unfreeze a card from the right click menu.

[Example code](https://app.zingsoft.com/demos/embed/B5VBCN0Z)

## Related Resources
Here are some extra resources related to this feature to help with creating your grid:

* [Frozen Rows](https://www.zinggrid.com/docs/features/frozen-rows)
* [Layouts](https://www.zinggrid.com/docs/features/layouts)
* [Attribute List](https://www.zinggrid.com/docs/api/tags/zing-grid)