Use grids to display tabular data in a structured, easy-to-scan layout. Keep grid data values concise and consistently-formatted to maximize readability.
Left-align text and right-align numbers and dates (in left-to-right locales).
Align headers consistently with column content.
The standard grid layout offers a good balance between information density and readability.
Use the dense layout option to reduce the need for vertical scrolling when showing grids with a large number of rows. Note that some users may find the dense grids to be harder to read because of their reduced white space.
Use the alternate row shading option to help users match up values on the same row when scanning grids with a lot of data. The shading may not be necessary when showing grids with only a few rows of data.
Use the lightweight border style to remove the outer border and vertical column divider lines from grids. This creates a less cluttered look for simple grids that can easily be scanned without the need for extra decorative lines.
When displaying multiple grids on the same page, use the same density and styling options for all grids to create a consistent experience.
On This Page