> 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

## 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](/files/hmTUTZCUYfGEbw3n08XR)

![Changing the DikeGrid size](/files/QTkqM7bE5Cv5urDCdaMt)