You are viewing documentation for Vaadin Framework 8 and related products View documentation for Vaadin Framework 7 ›
Styling · Vaadin
Vaadin Elements - Grid - Styling


The appearance of vaadin-grid is designed to fit in with the Material Design language from Google. This section will explain how you can customize the look of your vaadin-grid to fit your own application theme. Some CSS properties such as font-family will be inherited from the containing page, while others may need to be changed with custom CSS properties and mixins.


By default vaadin-grid takes all horizontal space available and set its height depending on the number of data rows. You can change this behavior by using standard sizing properties, such as width and height.

The height can also be defined as the number of rows to be displayed by using the visible-rows attribute or grid.visibleRows JavaScript property.

Custom Properties

The vaadin-grid element is compatible with paper-styles from the Polymer Element Catalog. The selection checkboxes and focus highlights inherit their color from the --primary-color defined in the paper-styles.

vaadin grid styling
Figure 1. An example of custom highlight color and row heights

You can also use some custom properties defined in vaadin-grid. Currently, they include both CSS properties and mixins. The CSS properties allow adjusting heights of different row types, while the mixins are applied on different types of row cells.

Table 1. Available custom properties

Custom property


Default value


Data row height



Header row height



Footer row height



Mixin applied on the cells.



Mixin applied on the cells of the selected row.



Mixin applied on the cells of the striped rows.