SAPUI5 provides several different grid layouts that are suitable for different use cases.
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.
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.
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.
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.
|
Feature Supported? |
|
|
|
|
|---|---|---|---|---|
|
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.
Related Information
API Reference: sap.ui.layout.cssgrid.CSSGrid
Samples: sap.ui.layout.cssgrid.CSSGrid
API Reference: sap.ui.layout.Grid