Components/Grid List/Grid List

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.

This places a Delete button on the right side of an item toolbar. To turn on the Delete mode, add the \

If grouped, a group header is displayed above all items which belong to the corresponding group. The group header is not interactive. To create grid list group headers use \

To apply state, add the corresponding class \

A highlight indicator is shown in front of the item it needs to show that an item needs attention. To add highlight indicator, add a span element with \

The filter information panel displays the selected filters. To show filter information panel, follow the current example.

The More button loads more items to the front end if not all items have yet been loaded. To show "More" button, follow the current example.

The footer can be used to display additional static information relating to the content. To create a grid list footer, follow the current example.

It's possible to have items without some parts like image, title & description or body. But please note that by default items have equal height set by the tallest item, you can overwrite it by yourself or use class \