---
title: "Interface: IGridConfig | Customer's Canvas On-Premises"
canonical: "https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/ConfigurationInterfaces.IGridConfig/"
---

# Interface: IGridConfig

> A structure containing the grid configuration.

## Remarks

For details, see the [Grids https://customerscanvas.com/dev/editors/iframe-api/editor-configuration/rulers-grids-snaplines.html\|Grids](https://customerscanvas.com/dev/editors/iframe-api/editor-configuration/rulers-grids-snaplines.html) topic.

## Example

``` js
configuration = {
   grid: {
       stepX: 0.1,
       stepY: 0.1
   }
};
```

## Properties

### horizontalColor?

> `optional` **horizontalColor?**: `string`

Color of the horizontal grid lines.

***

### verticalColor?

> `optional` **verticalColor?**: `string`

Color of the vertical grid lines.

***

### stepX?

> `optional` **stepX?**: `number`

Distance between vertical grid lines.

***

### stepY?

> `optional` **stepY?**: `number`

Distance between horizontal grid lines.

***

### lineWidthPx?

> `optional` **lineWidthPx?**: `number`

Width of grid lines in pixels.

***

### enabled?

> `optional` **enabled?**: `boolean`

Displays the grid; if the grid is displayed it can be toggled by the **Grid** button.