Like a table, a grid is a structure to distribute items into rows and columns. Unlike a table, a grid doesn’t have a fixed structure; rather, the rows and columns are determent by the available space.
Is this the right control?¶
Like lists, Grids are used to display a sorted or unsorted set of items. All items should be of the same kind.
Grids adjust the number of columns dynamically to distribute the items according to the available horizontal space without making the grid horizontally scrollable. Grids can be vertically scrollable though.
Don’t have blank grid items; use meta-options, e.g. (None) instead.
Place options that represent general options (e.g. All, None) at the beginning of the grid.
Sort grid items in a logical order. Make sure sorting fits translation.
For accessibility make sure to test keyboard navigation with the grid.
Grids can be used for the picker pattern. Place a button below the grid to add items to the grid. To remove items from the grid, either add a remove action on the item, or give the user the possibility to select items and add a global remove button at the bottom of the grid.
If the the order of the items can be changed by the user, permit re-ordering via drag-and-drop.
All items must be the same size. Item can change their size, either through user input or as a response to changes of the available space for the grid.
All rows, except the last one, must have the same number of items.
Use sentence style capitalization for grid view items.