---
id: "packages/active-grid/api/use-column-sizing"
title: "useColumnSizingVars"
description: "useColumnSizingVars: generated from the source of active-grid."
url: "/packages/active-grid/api/use-column-sizing"
locale: "en"
revision: "g0mvjxwj5c-88bdbe1c:use-column-sizing"
---

# useColumnSizingVars

Exported by `@workspace/active-grid`. Generated from the package source; part of [the index of every export](/packages/active-grid/api).

## Functions, hooks and constants

**useColumnSizingVars**: `<TData>(publicGrid: Grid<TData>) => Record<string, number \| string>`

Computes CSS variable values from engine column sizing state.
Applied as inline styles on the outer grid div.

When flex layout is enabled, `useFlexLayout` overrides these values on the
body/header scroll containers via direct DOM writes (style.setProperty).
The CSS cascade ensures child element styles always win — this hook serves
as the initial/fallback values for the first render before useFlexLayout's
useLayoutEffect fires. See use-flex-layout.ts for the full rationale.