---
title: "Column Resizing | Features"
description: "Add resizing to ZingGrid's columns. Specify optional min and max values, and whether resize handles are visible on load."
url: https://www.zinggrid.com/docs/features/column-resizing
---

```text
experiment_id: web-retrieval-v1
fixture_id: /docs/features/column-resizing.md
mode: provenance
representation: markdown
origin_response_id: 491dc6892269729ea6bfaa168d797d73
version: 2026-10-21
version_created_at_utc: 2026-10-21T20:42:35.677Z
version_nonce: 007fac1c12afb2263cce1bd0e060f7c3
generated_at_utc: 2026-11-08T03:04:55.540Z
response_nonce: 26460de2ddd2f179a70fc3a3dcc7d74b
```

# Column Resizing

Enable column resizing for all non-control grid columns. You can resize globally for all columns or set/override on individual ones.

Add optional minimum or maximum width constraints and determine if the resize handles are always visible or only on cell hover (default).

## Enable Resizing

To enable resizing for all non-control columns, add the `column-resizable` attribute to `<zing-grid>`, like so:

```html
<zing-grid ... column-resizable>
```

To add to individual columns instead, add the `resizable` attribute to `<zg-column>`:

```html
<zing-grid>
  <zg-colgroup>
    <!-- Not Resizable -->
    <zg-column ...>
    <!-- Is Resizable -->
    <zg-column ... resizable>
  </zg-colgroup>
</zing-grid>
```

> **Note:** Adding `resizable` to control columns is the only way to make them resizable.

### Column Resizable Grid
Here is a complete grid with the option to resize columns as necessary:

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

### Force Visibility

By default, the resize handles only appear when you hover over the column's header cell. To override this and make the handles always appear, add `column-resizable-persistent` to `<zing-grid>`, like so:

```html
<zing-grid ... column-resizable column-resizable-persistent>
```

For individual columns, add `resize-persistent`:

```html
<zing-grid column-resizable>
  <zg-colgroup>
    <!-- Handle appears on hover -->
    <zg-column ...>
    <!-- Handle always shows -->
    <zg-column ... resize-persistent>
  </zg-colgroup>
</zing-grid>
```

## Min and Max Limits

Set the minimum and maximum limits that the column can be resized to globally on `<zing-grid>`, which applies to all columns:

* `column-resizable-min-width`
* `column-resizable-max-width`

```html
<zing-grid
  column-resizable
  column-resizable-min-width="200"
  column-resizable-max-width="800"
>
```

Or set/override on individual columns with:

* `resizable-min-width`
* `resizable-max-width`

```html
<zing-grid column-resizable>
  <zg-colgroup>
    <!-- No limits -->
    <zg-column ...>
    <!-- Cannot reduce lower than 200 pixels wide -->
    <zg-column ... resizable-min-width="200">
  </zg-colgroup>
</zing-grid>
```

> **Warning:** Min and max limits only apply once you resize the column. They do not dictate the starting width of the column.

### Min/Max Width Column Resizable Grids
Here is a complete grid with a limit for the **minimum** width you can resize a column to:

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

Here is a complete grid with a limit for the **maximum** width you can resize a column to:

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

## Resize Handle Styling

You can customize the resize icon and some of the handler styling.

### Icon

The resize icon is set using a `<zg-icon>` instance with a name of `resize`. To customize it, set/replace `<symbol id="resize" ...>` in your custom theme's `.svg` file with your new svg-icon code.

For more info on custom themes and how to replace icons, view the [Custom Theme section of the Styling features page](https://www.zinggrid.com/docs/features/styling#custom-svg-file-optional).

### CSS Variables

You can also use any of these internal CSS variables to change the visual aspects of the resize handle:

* `--zg-column-resize-background`
* `--zg-column-resize-background_active`
* `--zg-column-resize-color`
* `--zg-column-resize-height`
* `--zg-column-resize-top`
* `--zg-column-resize-width`

> **Note:** The resize handles are in the Light Dom, so you can customize all aspects of it with external CSS. Using the variables will ensure only the presentation and not the functionality of the handles are modified.

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

* [Custom Themes Documentation](https://www.zinggrid.com/docs/features/styling#custom-theme)
* [List of CSS Variables](https://www.zinggrid.com/docs/api-css-variables)