Components/Grid List/Selection

As with the list and the responsive table, the grid list displays a set of items. In contrast to both controls, the grid list displays the items not in rows, but in a grid. The grid list is usually used as an alternative view for a list or table. It is ideal for displaying images, charts, object cards, and other content, which profit from more height (but less width).

**Use the grid list if:** - Your content is “visual” and profits from the rectangular format of the items. This is true for e.g. images, charts, and object cards. - The focus is on items, not on cells. The grid list shows complete items. - You want to display a homogeneous set of basic data. - You need to sort, group, or filter simple data sets. - As an alternative view for tables or lists, if the content profits from the different format. **Do not use the grid list if:** - Your content is not appropriate for a card-like format. For example, do not use the grid list for displaying a wall of text. Use a table instead. - The main use case is to select one item from a very small number of items, without viewing additional details. In this case, a select or combo box might be more appropriate. - Data needs to be structured in a hierarchical manner. In this case, a tree might be more appropriate. - You need an overview of a large amount of data. In this case, use a chart. - You just need it for layout reasons. In this case, use a layout container such as the CSSGrid. - You want to manage complex datasets that need to be extensively sorted, grouped, filtered, or edited. In this case, use a table. **Use the grid list if:** - Your content is “visual” and profits from the rectangular format of the items. This is true for e.g. images, charts, and object cards. - The focus is on items, not on cells. The grid list shows complete items. - You want to display a homogeneous set of basic data. - You need to sort, group, or filter simple data sets. - As an alternative view for tables or lists, if the content profits from the different format. - Your content is not appropriate for a card-like format. For example, do not use the grid list for displaying a wall of text. Use a table instead. - The main use case is to select one item from a very small number of items, without viewing additional details. In this case, a select or combo box might be more appropriate. - Data needs to be structured in a hierarchical manner. In this case, a tree might be more appropriate. - You need an overview of a large amount of data. In this case, use a chart. - You just need it for layout reasons. In this case, use a layout container such as the CSSGrid. - You want to manage complex datasets that need to be extensively sorted, grouped, filtered, or edited. In this case, use a table.

Items cannot be selected but can still use

One item in the grid list can be selected. Need click on an item to select it. To turn on the Single select mode, add the \

One item in the grid list can be selected. For this, the grid list provides radio buttons on the left side of each item toolbar. To turn on the Single select left mode, add the \

One item in the grid list can be selected. For this, the grid list provides radio buttons on the left side of each item toolbar. To turn on the Single select right mode, add the \

Users can select one or more items. For this, the grid list provides checkboxes on the left side of each item toolbar. To turn on the Multi select mode, add the \