---
type: how-to
title: Grid size
metaTitle: Grid size - JavaScript Data Grid | Handsontable
description: Set the width and height of the grid, using either absolute values or values relative to the parent container.
permalink: /grid-size
canonicalUrl: /grid-size
tags:
  - grid sizing
  - width
  - height
  - dimensions
react:
  metaTitle: Grid size - React Data Grid | Handsontable
angular:
  metaTitle: Grid size - Angular Data Grid | Handsontable
vue:
  metaTitle: Grid size - Vue Data Grid | Handsontable
searchCategory: Guides
category: Getting started
---
Set the width and height of the grid, using either absolute values or values relative to the parent container.

[[toc]]

## Set your grid's size

You need to define the grid's container as a starting point to initialize it. Usually, the `div` element becomes this container. This container should have defined dimensions as well as the rest of your layout. Handsontable supports relative units such as `%`, `rem`, `em`, `vh`, `vw`, and `px`.

### Define the size in your CSS

Both `width` and `height` could be defined as inline styles or as a CSS class property. In this case, it's important to define what should be an `overflow` parent properly. Handsontable looks for the closest element with `overflow: auto` or `overflow: hidden` to use it as a scrollable container. If no such element is found, a window will be used.

::: tip

Handsontable doesn't observe CSS changes for containers out of the box.
If you'd like to observe it, you can define the dimensions in the configuration object or create your own observer.

:::

### Pass the size in the configuration

You can pass width and height values to Handsontable as numbers or possible CSS values for the "width"/"height" properties:

::: only-for javascript

```js
{
  width: '100px',
  height: '100px',
}
```

or

```js
{
  width: '75%',
  height: '75%',
}
```

or

```js
{
  width: 100,
  height: 100,
}
```

:::

::: only-for react

```jsx
  <HotTable height={100} width={100} />
```

or

```jsx
  <HotTable height="75%" width="75%" />
```

or

```jsx
  <HotTable height="100px" width="100px" />
```

:::

::: only-for angular

```ts
import { GridSettings } from "@handsontable/angular-wrapper";

gridSettings: GridSettings = {
  height: 100,
  width: 100,
};
```

or

```ts
import { GridSettings } from "@handsontable/angular-wrapper";

gridSettings: GridSettings = {
  height: "75%",
  width: "75%",
};
```

or

```ts
import { GridSettings } from "@handsontable/angular-wrapper";

gridSettings: GridSettings = {
  height: "100px",
  width: "100px",
};
```

```html
<hot-table [settings]="gridSettings" />
```

:::

::: only-for vue

```js
const hotSettings = ref({
  width: '100px',
  height: '100px',
});
```

or

```js
const hotSettings = ref({
  width: '75%',
  height: '75%',
});
```

or

```js
const hotSettings = ref({
  width: 100,
  height: 100,
});
```

:::

These dimensions will be set as inline styles in a container element, and `overflow: hidden` will be added automatically.

If container is a block element, then its parent has to have defined `height`. By default block element is `0px` height, so `100%` from `0px` is still `0px`.

Changes called in [`updateSettings()`](@/api/core.md#updatesettings) will re-render the grid with the new properties.

### Use `'auto'` sizing

Set `height: 'auto'` to make the grid grow to match its content height. Handsontable writes `height: auto; overflow: clip;` as inline styles on the root element. No internal vertical scrollbar is created, so the page itself scrolls when the grid is taller than the viewport.

::: only-for javascript

```js
{
  height: 'auto',
}
```

You can combine it with `width: 'auto'` to let the grid follow its parent container's width:

```js
{
  height: 'auto',
  width: 'auto',
}
```

:::

::: only-for react

```jsx
  <HotTable height="auto" />
```

You can combine it with `width="auto"` to let the grid follow its parent container's width:

```jsx
  <HotTable height="auto" width="auto" />
```

:::

::: only-for angular

```ts
import { GridSettings } from "@handsontable/angular-wrapper";

gridSettings: GridSettings = {
  height: "auto",
};
```

You can combine it with `width: "auto"` to let the grid follow its parent container's width:

```ts
import { GridSettings } from "@handsontable/angular-wrapper";

gridSettings: GridSettings = {
  height: "auto",
  width: "auto",
};
```

:::

::: only-for vue

```js
const hotSettings = ref({
  height: 'auto',
});
```

You can combine it with `width: 'auto'` to let the grid follow its parent container's width:

```js
const hotSettings = ref({
  height: 'auto',
  width: 'auto',
});
```

:::

`height: 'auto'` is different from leaving `height` unset:

| Setting            | Inline styles on root                                       | Scroll parent                                                                  | Row virtualization          |
| ------------------ | ----------------------------------------------------------- | ------------------------------------------------------------------------------ | --------------------------- |
| `height: 'auto'`   | `height: auto; overflow: clip;`                             | The page, outside the grid                                                     | Disabled, all rows render   |
| `height: <number>` | `height: <n>px; overflow: clip;`                            | The grid itself                                                                | Enabled                     |
| `height` unset     | None, Handsontable does not touch the root inline styles    | Nearest ancestor with `overflow: auto` or `overflow: hidden`, else the window  | Depends on the scroll parent |

::: tip

With `height: 'auto'`, every row is laid out in the DOM at once. Avoid this value for large datasets. Set a numeric `height` instead so that Handsontable can virtualize off-screen rows.

:::

### Troubleshooting with 100% height

When the `height` option is set to 100%, there are three ways to define the container’s height. Assuming you're creating an Handsontable instance that has `100% height` and container is element with id `#example`.

```js
const container = document.querySelector('#example');

const hot = new Handsontable(container, {
  height: '100%',
  // ...rest of config
}
```

1. Set a fixed height (in pixels) directly on the `example` element where Handsontable is mounted

```html
<div class="page-wrapper">
  <!-- Other HTML element -->
  <div id="example" style="height: 500px">
    <div class="ht-root-wrapper ht-theme-main">
      <div class="ht-grid">
        <div class="ht-wrapper">
          <!-- Table content -->
        </div>
      </div>
      <!-- Table components -->
    </div>
  </div>
</div>
```

2. Set a fixed height on the parent element, and then give the `example` itself a height of 100%

```html
<div class="page-wrapper" style="height: 500px">
  <!-- Other HTML element -->
  <div id="example" style="height: 100%">
    <div class="ht-root-wrapper ht-theme-main">
      <div class="ht-grid">
        <div class="ht-wrapper">
          <!-- Table content -->
        </div>
      </div>
      <!-- Table components -->
    </div>
  </div>
</div>
```

3. Use flexbox on the wrapper element to make the `example` fill the available space

```html
<div class="page-wrapper" style="display: flex; height: 500px">
  <!-- Other HTML element -->
  <div id="example" style="flex: 1">
    <div class="ht-root-wrapper ht-theme-main">
      <div class="ht-grid">
        <div class="ht-wrapper">
          <!-- Table content -->
        </div>
      </div>
      <!-- Table components -->
    </div>
  </div>
</div>
```

When using Flexbox, the container automatically expands to fill the available space in the flex container. This is particularly useful when you want the grid to take up all the available space within its parent.

## What if the size is not set

If you don't define any dimensions, Handsontable generates as many rows and columns as needed to fill the available space.

If your grid's contents don't fit in the viewport, the browser's native scrollbars are used for scrolling. For this to work properly, Handsontable's [layout direction](@/guides/internationalization/layout-direction/layout-direction.md) (e.g., [`layoutDirection: 'rtl'`](@/api/options.md#layoutdirection)) must be the same as your HTML document's layout direction (`<html dir='rtl'>`). Otherwise, horizontal scrolling doesn't work.

## Autoresizing

Handsontable observes window resizing. If the window's dimensions have changed, then we check if Handsontable should resize itself too. Due to the performance issue, we use the debounce method to respond on window resize.

You can easily overwrite this behaviour by returning `false` in the [`beforeRefreshDimensions`](@/api/hooks.md#beforerefreshdimensions) hook.

::: only-for javascript

```js
{
  beforeRefreshDimensions() { return false; }
}
```

:::

::: only-for react

```jsx
  <HotTable beforeRefreshDimensions={() => false} />
```

:::

::: only-for angular

```ts
import { GridSettings } from "@handsontable/angular-wrapper";

gridSettings: GridSettings = {
  beforeRefreshDimensions: () => false,
};
```

```html
<hot-table [settings]="gridSettings" />
```

:::

::: only-for vue

```js
const hotSettings = ref({
  beforeRefreshDimensions() { return false; },
});
```

:::

## Manual resizing

The Handsontable instance exposes the [`refreshDimensions()`](@/api/core.md#refreshdimensions) method, which helps you to resize grid elements properly.

::: only-for react

::: tip

To use the Handsontable API, you'll need access to the Handsontable instance. You can do that by utilizing a reference to the `HotTable` component, and reading its `hotInstance` property.

For more information, see the [Instance methods](@/guides/getting-started/react-methods/react-methods.md) page.

:::

:::

::: only-for angular

::: tip

To use the Handsontable API, you'll need access to the Handsontable instance. You can do that by utilizing a reference
to the `HotTableComponent`, and reading its `hotInstance` property.

For more information, see the [Instance access](@/guides/getting-started/angular-hot-instance/angular-hot-instance.md) page.
:::

:::

::: only-for vue

::: tip

To use the Handsontable API, you'll need access to the Handsontable instance. Use a template ref on the `HotTable` component and read its `hotInstance` property.

For more information, see the [Referencing the Handsontable instance in Vue 3](@/guides/getting-started/vue3-hot-reference/vue3-hot-reference.md) page.

:::

:::

```js
hot.refreshDimensions();
```

You can listen for two hooks, [`beforeRefreshDimensions`](@/api/hooks.md#beforerefreshdimensions) and [`afterRefreshDimensions`](@/api/hooks.md#afterrefreshdimensions).

::: only-for javascript

::: example #example --html 1 --css 2 --js 3 --ts 4

@[code](@/content/guides/getting-started/grid-size/javascript/example.html)
@[code](@/content/guides/getting-started/grid-size/javascript/example.css)
@[code](@/content/guides/getting-started/grid-size/javascript/example.js)
@[code](@/content/guides/getting-started/grid-size/javascript/example.ts)

:::

:::

::: only-for react

::: example #example :react --css 1 --js 2 --ts 3

@[code](@/content/guides/getting-started/grid-size/react/example.css)
@[code](@/content/guides/getting-started/grid-size/react/example.jsx)
@[code](@/content/guides/getting-started/grid-size/react/example.tsx)

:::

:::

::: only-for angular

::: example #example :angular --ts 1 --html 2

@[code](@/content/guides/getting-started/grid-size/angular/example.ts)
@[code](@/content/guides/getting-started/grid-size/angular/example.html)

:::

:::

::: only-for vue

::: example #example :vue --js 1

@[code](@/content/guides/getting-started/grid-size/vue/example.vue)

:::

:::

## Related articles

**Related guides**

<div class="boxes-list">

- [Column widths](@/guides/columns/column-width/column-width.md)
- [Row heights](@/guides/rows/row-height/row-height.md)

</div>

**Configuration options**

<div class="boxes-list">

- [height](@/api/options.md#height)
- [layoutDirection](@/api/options.md#layoutdirection)
- [preventOverflow](@/api/options.md#preventoverflow)
- [width](@/api/options.md#width)

</div>

**Core methods**

<div class="boxes-list">

- [refreshDimensions()](@/api/core.md#refreshdimensions)
- [updateSettings()](@/api/core.md#updatesettings)

</div>

**Hooks**

<div class="boxes-list">

- [afterCellMetaReset](@/api/hooks.md#aftercellmetareset)
- [afterRefreshDimensions](@/api/hooks.md#afterrefreshdimensions)
- [afterUpdateSettings](@/api/hooks.md#afterupdatesettings)
- [beforeRefreshDimensions](@/api/hooks.md#beforerefreshdimensions)

</div>

## Result

Your grid now renders at the dimensions you specified, responding to container size or fixed pixel values as configured.
