> For the complete documentation index, see [llms.txt](https://docs.dikesoft.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.dikesoft.com/fundamentals/grid-structure/grid-size.md).

# Grid Size

You can customize the width and the height of the DikeGrid instance.

## Grid width

By default, the DikeGrid width is equal to ***auto***. However, you can change this value by providing width's input property.

{% hint style="success" %}
You can also change this value by providing an Injection Token called <mark style="color:blue;">`GRID_WIDTH`</mark>.
{% endhint %}

## Grid height

By default, the DikeGrid height is equal to ***90vh***. However, you can change this value by providing height's input property.

{% hint style="success" %}
You can also change this value by providing an Injection Token called <mark style="color:blue;">`GRID_HEIGHT`</mark>.
{% endhint %}

## Changing the DikeGrid size

Let us give the DikeGrid the previous input properties, binding the related properties from the gridProperties object.

{% code title="grid-structure.component.html" %}

```markup
<dike-grid id="grid-structure"
    [width]="gridProperties.width"
    [height]="gridProperties.height">
</dike-grid>
```

{% endcode %}

Now, open the [Floating Configuration Panel](/overview.md#floating-configuration-panel), go to the **Size** section, type **80%** and **90vh** for the width and the height, respectively.

![Floating Configuration Panel - Size](https://3888584995-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpDxfe6pgRLqBLMQgZ0kG%2Fuploads%2FkFyJGYIG8hNLPwC7G2o4%2Fsize-panel-conf.png?alt=media\&token=2c338d96-5b0b-4c1e-bd6b-ed0dc167c262)

![Changing the DikeGrid size](https://3888584995-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpDxfe6pgRLqBLMQgZ0kG%2Fuploads%2FMKMhedxDdQKZ7f1nQkTM%2Fgrid-structure-size-changed.png?alt=media\&token=e2f2b641-a08c-4522-92b9-6bf1fdf225ec)