# Gutters

## Horizontal Gutters

Horizontal Gutters are the vertical space between rows, and it has **3 pixels** of height. The DikeGrid definition always draws a line of one-pixel width at the center of this vertical space.

{% hint style="info" %}
Neither the vertical space nor the horizontal line is customizable in size.
{% endhint %}

## Vertical Gutters

Vertical Gutters are the horizontal space between columns. By default, Vertical Gutters have **5 pixels** in width.&#x20;

You can provide an input flag called <mark style="color:orange;">`verticalRowLines`</mark> to the DikeGrid, and it could draw a line of one-pixel width at the center of this horizontal space.

{% hint style="info" %}
Neither the horizontal space nor the vertical line is customizable in size.
{% endhint %}

Let us bind the related property from the `gridProperties` object to display the vertical lines per row.&#x20;

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

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

{% endcode %}

Now, open the [Floating Configuration Panel](/overview.md#floating-configuration-panel), go to the **Appearance** section, and enable the **Vertical Row Lines** checkbox.

![Floating Configuration Panel - Appearance](/files/yj1vCd6ZqdMwO1MT5eYm)

You can see the vertical lines per row in the following screenshot.

![Vertical lines per row](/files/CTOSASLaJyste52cKacO)

### Who does the Vertical Gutters own?

By definition, columns own the Vertical Gutters:

1. Columns in the left, center or group panels own the right-gutter. Only the first visible column holds the left-gutter as well.
2. Columns in the right panel own the left-gutter. Only the last visible column holds the right-gutter as well.

{% hint style="info" %}
Vertical Gutter owning is important for **resizing** and **dragging** purposes.
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.dikesoft.com/fundamentals/grid-structure/gutters.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
