---
title: "ZingGrid Web Component: `<zg-card-resize>` | Docs"
description: "View our in depth tutorial covering the web component `<zg-card-resize>` tag and the associated features for the JavaScript grid."
url: https://www.zinggrid.com/docs/api/tags/zg-card-resize
---

```text
experiment_id: web-retrieval-v1
fixture_id: /docs/api/tags/zg-card-resize.md
mode: provenance
representation: markdown
origin_response_id: 9deeb0e5156c2570dfd357723dd78469
version: 2026-10-21
version_created_at_utc: 2026-10-21T20:42:35.618Z
version_nonce: 2b5c97bbaa6607200e7ce8dbaaa518e1
generated_at_utc: 2026-10-26T04:30:53.296Z
response_nonce: 489d45fd9e21bd5bdff3568822c3eda0
```

# `<zg-card-resize>`

[Interactive Storybook Playground](https://storybook.zinggrid.com/?path=/docs/components-zg-card-resize--docs)

The `<zg-card-resize>` tag is the container for the menu that appears when clicking on the control bar's card resize button. It is used as a
CSS target for styling by the developer. **The `<zg-card-resize>` web component should not be accessed specifically beyond styling.**

![Image of the DOM relationship for the zg-card-resize web component tag](https://storage.googleapis.com/zinggrid-pwa.appspot.com/components/v2/zg-card-resize-web-component-dom.png "Image of the DOM relationship for the zg-card-resize web component tag")

#### Related Web Components

- [`<zg-control-bar>`](https://www.zinggrid.com/docs/api/tags/zg-control-bar/)
- [`<zg-button>`](https://www.zinggrid.com/docs/api/tags/zg-button/)
- [`<zg-card>`](https://www.zinggrid.com/docs/api/tags/zg-card/)
- [`<zg-body>`](https://www.zinggrid.com/docs/api/tags/zg-body/)

## Usage

The `<zg-card-resize>` element is a generated element added to `<zing-grid>` when the `card-resizable` attribute is defined and the grid is set to `layout="card"`. It opens a menu, from the control bar's card resize button, that lets the user pick between a "Responsive" card size range (a Min/Max cards-per-row range with a preferred size scale) and a "Fixed" single cards-per-row size.

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

The `card-resizable` attribute also accepts a `"fixed"` value, which starts the menu in "Fixed" mode instead of the default "Responsive" mode.

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

## Attributes

There are no attributes available for the `<zg-card-resize>` web component.

## CSS Variables
`<zg-card-resize>` can be styled with CSS variables, like so:

```css
:root {
  --zg-card-resize-background: red;
}
```

Below is a list of all the associated `--zg-card-resize` CSS variables. Check out the [full list of CSS variables](https://www.zinggrid.com/docs/api/css-variables/reference/) or our [Styling Basics guide](https://www.zinggrid.com/docs/getting-started/styling-basics/) to learn more about styling the grid.

| Name | Default | Description | Demo |
| --- | --- | --- | --- |

## CSS Shadow Parts

`<zg-card-resize>` exposed elements within the shadow can be styled by CSS shadow parts, like so:

```css
zg-card-resize::part(header) {
  background-color: red;
}
```

Below is a list of all the associated ZGCardResize shadow parts. Check out the [full list of CSS shadow parts](https://www.zinggrid.com/docs/api/styling/css-shadow-parts) or our [Styling Basics guide](https://www.zinggrid.com/docs/getting-started/styling-basics/) to learn more about styling the grid.

| Name | Description |
| --- | --- |

## Slots

There are no slots available for the `<zg-card-resize>` web component.