loio
32d4b9c2b981425dbc374d3e9d5d0c2e

view on: demo kit nightly build | demo kit latest release

Grid Controls

OpenUI5 provides several different grid layouts that are suitable for different use cases.

`sap.f.GridContainer`

The sap.f.GridContainer is a layout control used to align tiles, cards, or other controls in configuration, such as an overview page. It provides a regular grid system in which all rows have the same height and all columns have the same width. Each item can be configured to take different number of rows and columns inside that mesh. If rows span is unknown for an item, it is automatically calculated by the GridContainer, based on the height of the item.

`sap.f.GridList`

The sap.f.GridList is a layout control that provides the flexibility to display list items in a two-dimensional grid. It extends the sap.m.ListBase control and therefore receives all of its features. The layout used is based on the CSS display grid and the control has a default configuration that displays the list items in a grid.

`sap.ui.layout.cssgrid.CSSGrid`

The sap.ui.layout.cssgrid.CSSGrid is a layout control, used to create full-page layouts or user interface elements. It is based on the browser-native CSS display grid and works by the HTML standard specification of a grid. This grid is two-dimensional, meaning that it is possible to specify both rows and columns. The dimensions and position of a single item can be configured, for example, an item can take two rows and two columns from the grid. The control can be used along with the sap.m.FlexBox control as a one-dimensional alternative for layouting.

`sap.ui.layout.Grid`

The sap.ui.layout.Grid control defines how many columns are displayed depending on the available screen size with a maximum of 12. The height of a single row is always based on the content of the highest item in that row.

Overview of Grids and Supported Features

Feature Supported?	`sap.f.GridContainer`	`sap.f.GridList`	`sap.ui.layout.cssgrid.CSSGrid`	`sap.ui.layout.Grid`
Complies with the grid specification according to the HTML Standard
Number of columns supported	Unlimited	Unlimited	Unlimited	Up to 12
Can configure row height, column width, and gap dimensions
Supports auto calculation of rows per item
Can fill empty spaces in the grid
Items flow direction	Horizontal only	Horizontal and vertical	Horizontal and vertical	Horizontal only
Can configure item position
Can configure item dimensions The ability to define how many rows and columns an item should take.
Supports columns breathing
Supports templating The possibility to use one of the predefined layout templates or to create a custom template for specific layouts.		¹	¹
Supports screen-size breakpoints		¹	¹
Supports container-size breakpoints		¹	¹
Supports indentation
Can control items visibility based on breakpoints
Supports keyboard handling	²
Supports growing
Supports sorting, filtering and grouping
Supports headers and footers
Supports selection and highlighting

1) By using the customLayout aggregation.
2) Two-dimensional keyboard navigation is supported. Users can navigate through the contained controls using the arrow keys.

sap.f.GridContainer
The GridContainer allows you to align tiles, cards or other controls in configuration, such as an overview page.
sap.f.GridList
The GridList allows you to use different types of layouts responsible for the positioning and responsiveness of the content.
sap.ui.layout.cssgrid.CSSGrid
The CSSGrid is a flexible layout, based on the two-dimensional, browser-native grid system, using the standard CSS property display with value grid. It allows for flexible positioning of user interface elements, inside horizontal and vertical grid structures.
sap.ui.layout.Grid
A flexible layout that positions its items in a 12-column flow layout.