Rows

Since the DikeGrid structure definition uses the CSS Grid Layout specification, as a convention, every row is also called Content Row.

Content Rows

Content Rows are composed of cells. Structurally speaking, a column definition constructs a cell definition.

Content Rows extend the entire DikeGrid width. The following output shows some Content Rows:

The highlighted Content Rows have one column definition in the CSS Grid Layout specification. Therefore, the DikeGrid CSS Grid Layout will have three template columns when defining columns in all panels of the DikeGrid.

See the Panels' structure for more details.

Inside the Content Rows come the actual cell definitions. Content Rows use a nested CSS Grid Layout grid.

Changing the Content Row height

By default, Content Rows have a height of 50 pixels. However, you can change this height by providing a numeric value to the input property called contentRowHeight.

grid-structure.component.html
<dike-grid id="grid-structure"
    [contentRowHeight]="gridProperties.contentRowHeight">
</dike-grid>

You can also change the height of the Content Rows by providing the Injection Token called CONTENT_ROW_HEIGHT.

Open the Floating Configuration Panel, go to the Rows group, and type 100 in the Content Row Height textbox.

Last updated