Gutters

Gutters are the spaces between columns and rows. The DikeGrid definition could or could not draw a line at the center of these spaces.

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.

Neither the vertical space nor the horizontal line is customizable in size.

Vertical Gutters

Vertical Gutters are the horizontal space between columns. By default, Vertical Gutters have 5 pixels in width.

You can provide an input flag called verticalRowLines to the DikeGrid, and it could draw a line of one-pixel width at the center of this horizontal space.

Neither the horizontal space nor the vertical line is customizable in size.

Let us bind the related property from the gridProperties object to display the vertical lines per row.

grid-structure.component.html

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

Now, open the Floating Configuration Panel, go to the Appearance section, and enable the Vertical Row Lines checkbox.

Floating Configuration Panel - Appearance

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

Vertical lines per row

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.

Vertical Gutter owning is important for resizing and dragging purposes.