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

```text
experiment_id: web-retrieval-v1
fixture_id: /docs/api/tags/zg-column-resize.md
mode: provenance
representation: markdown
origin_response_id: 05f4952b7c8637e200e586fa6c8597c5
version: 2026-10-21
version_created_at_utc: 2026-10-21T20:42:35.623Z
version_nonce: c9cfc2880c6e61684484df0863f46f26
generated_at_utc: 2026-10-25T18:21:36.827Z
response_nonce: abbcfe1e7204c71c6f3f1ad08b9e415e
```

# `<zg-column-resize>`

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

The `<zg-column-resize>` tag is a web component that serves as a handle for resizing a column and used as a CSS target for styling by the developer. **The `<zg-column-resize>` web component should not be accessed specifically beyond styling.**

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

| Component | Relationship | Type | Ancestor |
| --- | --- | --- | --- |
| [ZGHeadCell](https://www.zinggrid.com/docs/api/tags/zg-head-cell) | Parent | Generated | n/a |

#### Related Web Components

- [`<zg-column>`](https://www.zinggrid.com/docs/api/tags/zg-column)
- [`<zg-head-cell>`](https://www.zinggrid.com/docs/api/tags/zg-head-cell)

## Usage

The `<zg-column-resize>` element is a generated element added to `<zg-head-cell>` when the `column-resizable` attribute is defined.

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

## Attributes

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

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

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

Below is a list of all the associated `<zg-column-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 |
| --- | --- | --- | --- |
| `--zg-column-resize-background` | none | Sets the background of the resize handle | [Example code](https://app.zingsoft.com/demos/embed/GY8NY03F) |
| `--zg-column-resize-height` | 40% | Sets the height of the resize handle | [Example code](https://app.zingsoft.com/demos/embed/18NKOWQO) |
| `--zg-column-resize-top` | 30% | Sets the top position of the resize handle | [Example code](https://app.zingsoft.com/demos/embed/02YVWHW2) |
| `--zg-column-resize-width` | 4px | Sets the width of the resize handle | [Example code](https://app.zingsoft.com/demos/embed/2BTZFOU2) |

## CSS Selector

`<zg-column-resize>` can be styled by common CSS selectors, like so:

```css
zg-column-resize {
  background: red;
}
```

## CSS Shadow Parts

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

```css
zg-column-resize::part(handle) {
  background-color: red;
}
```

Below is a list of all the associated ZGColumnResize 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 |
| --- | --- |
| `handle` | The resize handle container |
| `icon` | The resize icon |

## Slots

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