---
title: "Card Resizable | Features"
description: "Let users resize ZingGrid's card layout, either responsively within a Min/Max cards-per-row range, or to a single fixed cards-per-row count."
url: https://www.zinggrid.com/docs/features/card-resizable
---

```text
experiment_id: web-retrieval-v1
fixture_id: /docs/features/card-resizable.md
mode: provenance
representation: markdown
origin_response_id: ae329c9f5d52c276142f7e4a14493e01
version: 2026-10-21
version_created_at_utc: 2026-10-21T20:42:35.675Z
version_nonce: 6b1c88d6f04e6e5c73d64ac90dbcf194
generated_at_utc: 2026-10-26T04:30:38.900Z
response_nonce: 5f32a27760ee004993b2f3e885407c7e
```

# Card Resizable

When your grid is in card layout, ZingGrid can let users control how many cards appear per row. Enable this by adding the `card-resizable` attribute to `<zing-grid>`.

This adds a card resize button to the grid's control bar. Clicking it opens a menu where users can toggle between two modes:
* **Responsive** (default) - cards are sized within a Min/Max cards-per-row range, using a "Card Size Scale" slider (XS - XL) to prefer a smaller or larger card size within that range.
* **Fixed** - cards are sized to a single, fixed cards-per-row count, set with its own slider.

> **Note:** `card-resizable` 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.

## Enable Card Resizing

Add `card-resizable` to `<zing-grid>` to enable the feature. By default, the menu opens in "Responsive" mode:

```html
<zing-grid card-resizable
  layout="card"
  src="https://cdn.zinggrid.com/datasets/aapl-stock-data.json">
</zing-grid>
```

### Card Resizable Grid
Here is a complete grid with card resizing enabled:

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

## Fixed

Set `card-resizable="fixed"` to start the menu in "Fixed" mode instead, sizing every card to a single cards-per-row count:

```html
<zing-grid card-resizable="fixed"
  layout="card"
  src="https://cdn.zinggrid.com/datasets/aapl-stock-data.json">
</zing-grid>
```

To set the starting cards-per-row count, add `card-resizable-fixed` with a value from 1-6. The slider itself always spans 1-6 - this only seeds its starting value, and dragging the slider afterward overrides it. This attribute only applies while the menu is in "Fixed" mode.

```html
<zing-grid card-resizable="fixed" card-resizable-fixed="3" layout="card"
  src="https://cdn.zinggrid.com/datasets/aapl-stock-data.json">
</zing-grid>
```

### Fixed Card Resizable Grid
Here is a complete grid that starts in "Fixed" mode with a starting cards-per-row count of 3:

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

## Responsive

While in "Responsive" mode (the default), cards are sized within a Min/Max cards-per-row range, and a "Card Size Scale" slider lets users prefer a smaller or larger card size within that range.

### Card Size Scale

Use `card-resizable-responsive` to set the starting position of the "Card Size Scale" slider. It accepts one of `"XS"`, `"S"`, `"M"` (the default), `"L"`, or `"XL"` - each step smaller/larger than "M" adds/removes one card per row at every viewport breakpoint. This attribute only applies while the menu is in "Responsive" mode.

```html
<zing-grid card-resizable card-resizable-responsive="L" layout="card"
  src="https://cdn.zinggrid.com/datasets/aapl-stock-data.json">
</zing-grid>
```

### Responsive Card Resizable Grid
Here is a complete grid that starts with a "Card Size Scale" of "L":

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

## Responsive Min/Max Range

The "Card Range" slider caps how few or how many cards can appear per row while in "Responsive" mode, regardless of the "Card Size Scale" chosen. Set it with:

* `card-resizable-responsive-min` - the fewest cards allowed per row. Accepts a number 1-6, defaults to 1.
* `card-resizable-responsive-max` - the most cards allowed per row. Accepts a number 1-6, defaults to 6.

Both attributes only apply while the menu is in "Responsive" mode.

```html
<zing-grid card-resizable
  card-resizable-responsive-min="2"
  card-resizable-responsive-max="4"
  layout="card"
  src="https://cdn.zinggrid.com/datasets/aapl-stock-data.json">
</zing-grid>
```

### Responsive Min/Max Card Resizable Grid
Here is a complete grid limited to a range of 2-4 cards per row while in "Responsive" mode:

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

## Keyboard Navigation

The card resize button in the control bar is a standard, focusable button - tab to it and press Enter or Space to open the menu. When opened via keyboard, focus automatically moves to the menu's Responsive/Fixed toggle.

Once the menu is open:
* **Tab** / **Shift + Tab** - cycles focus forward/backward through the menu's controls. Focus is trapped inside the menu, wrapping from the last control back to the toggle, and vice versa.
* **Left Arrow** / **Right Arrow** - while focus is on the Responsive/Fixed toggle, switches between "Fixed" and "Responsive" mode.
* **Arrow keys** - while focus is on a slider (Card Range Min/Max, Card Size Scale, or Fixed cards-per-row), adjusts that slider's value, per native `<input type="range">` behavior.
* **Escape** - closes the menu and returns focus to the card resize button.

## Persisting State

To preserve a user's card resize choice (Responsive/Fixed, and whichever slider values they set) between page loads, add `preserve-state-id` to `<zing-grid>`, then include `cardresize` in `preserve-state-options`:

```html
<zing-grid card-resizable
  preserve-state-id="cardResizeState"
  preserve-state-options="cardresize"
  layout="card"
  src="https://cdn.zinggrid.com/datasets/aapl-stock-data.json">
</zing-grid>
```

### Persistent Card Resizable Grid
Here is a complete grid that preserves its card resize state between reloads:

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

> **Note:** For more on `preserve-state-id` and `preserve-state-options`, see the [Grid State Persistence](https://www.zinggrid.com/docs/features/grid-state-persistence) documentation.

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

* [`<zg-card-resize>`](https://www.zinggrid.com/docs/api/tags/zg-card-resize/)
* [Layouts](https://www.zinggrid.com/docs/features/layouts)
* [Grid State Persistence](https://www.zinggrid.com/docs/features/grid-state-persistence)
* [Attribute List](https://www.zinggrid.com/docs/api/tags/zing-grid)